プロが教える店舗&オフィスのセキュリティ対策術

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

A 回答 (7件)

<div class="button">


<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}
    • good
    • 9
この回答へのお礼

ありがとうございます!

これだとボタンとボタン間隔が設定できませんよね?

そのあたりで悩んでいます。

お礼日時:2013/08/05 10:51

<body>


<div style = "text-align:center">
<input type="submit" value="<< 戻る <<" />
<span style="margin-left:100px"><input type="submit" value="選択リセット" /></span>
<span style="margin-left:100px"><input type="submit" value=">> 進 む>>" /></span>
</div>
</body>

とりあえず適当に書きました。インデントきると改行でおかしくなるので、つけてません。
はっつけて実行してみてください。
    • good
    • 3
この回答へのお礼

ありがとうございます!
<span
↑このやりかたもありますね。
勉強になります。
ありがとうございました!

お礼日時:2013/08/05 13:21

#3です。


>これだと、ボタン同士の間隔は設定できませんよね?
えっと……「適度」ってのがどれくらいなのかはあなたしか知らないので「marginで調節してください」って書いたんですけど。
思ったことをそのまま投稿する前に一度試すようにしてもらいたいものです。
    • good
    • 3
この回答へのお礼

ありがとうございます!

お礼日時:2013/08/05 13:20

> これだとボタンとボタン間隔が設定できませんよね?



ボタンのマージン(div.button input { margin: 0px 20px; } の部分)で調整できます。
    • good
    • 1
この回答へのお礼

大変失礼しました!
div.button input
↑見落としていました・・・。
理想の配置ができました。
ありがとうございました!

お礼日時:2013/08/05 13:19

★HTMLをデザインのために書かない!!!これ最も大事な事です。

検索エンジンもナビゲーションとして理解してくれません。
 先でデザイン変えたくなったとき、困るのは自分です。

[HTML]タブの代わりに全角スペースでインデントさせています。
<div class="header">
 <div class="nav"><!-- divはclass名やidで文書構造を示すためのもの -->
  <ol>
   <li><a href="/">Top</a></li>
   <li><a href="./p4.html">Prev</a></li>
   <li><a href="./p6.html">Next</a></li>
   <li><a href="./appendix">Appendix</a></li>
  </ol>
 </div>
</div>
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

 その文書構造に基づいてスタイルシートで
(注)フロートを使うとブラウザやウィンドウサイズによって崩れる

スタイルシート
div.header div.nav{/* headerDIV内のnavDIV */
text-align:center;
line-height:1.8em;
}
div.header div.nav ol,div.header div.nav ol li{
list-style:none;
text-align:center;
margin:0;padding:0;
}
div.header div.nav ol li{
width:22%;
display:inline-block;
margin:3px;
}
div.header div.nav ol li a{
background-color:white;
display:block;
width:100%;height:100%;
border:outset 4px silver;
border-radius:8px;
text-decoration:none;
}
div.header div.nav ol li a:hover{
background-color:yellow;
}
div.header div.nav ol li a:active{
border-style:inset;
}

参考
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
    • good
    • 0
この回答へのお礼

ありがとうございます!

いくら細かく設定したところで、
そのページを見るブラウザや設定によって見え方が変わってしまうのは重々承知なのですが・・・
そのまま書くと、どうもボタンどうしの余白がせまいのが気になってしまってます。

ありがとうございました!

お礼日時:2013/08/05 10:55

<input />はインライン要素だからわざわざ<div>でfloatとかしなくていいです。

並べて書けば横に並びます。
うろ覚えとかコピペじゃなく、ちゃんと理解しないとそういう無駄なことをしてしまいますので、講座サイトでいいですからきちんと確認しましょう。

で、インラインなので中央寄せは
text-align:center
でできますよね。
三つのボタンを囲うボックスに設定すればそれでセンタリングできます。

「適度な余白」についてはあなたのさじ加減なのでこちらでは何もいえません。
marginでお好みで調整してください。
    • good
    • 0
この回答へのお礼

ありがとうございます!
これだと、ボタン同士の間隔は設定できませんよね?

そのあたりで悩んでいます。

お礼日時:2013/08/05 10:53

全体を<div style = "align:center"></div>で囲んでしまうか、


個人的には嫌いなのですが、<center>タグで囲んでしまうとか、どうでしょうか?
    • good
    • 0
この回答へのお礼

ありがとうございます!
これだと、ボタン同士の間隔は設定できませんよね?

そのあたりで悩んでいます。

お礼日時:2013/08/05 10:52

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A