- ベストアンサー
中央に等間隔なボタンを配置する方法とは？
- ホームページで複数のボタンを横に3つ等間隔に配置し、さらに中央に表示する方法について教えてください。
- 提供されたHTMLとCSSを使用してボタンを配置すると、全体的に左に寄ってしまっています。どのように修正すればいいでしょうか？
- 要約文3つ
- みんなの回答 （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; }
その他の回答 (6)
- s806099d
- ベストアンサー率34% (17/49)
<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> とりあえず適当に書きました。インデントきると改行でおかしくなるので、つけてません。 はっつけて実行してみてください。
お礼
ありがとうございます！ <span ↑このやりかたもありますね。 勉強になります。 ありがとうございました！
- play_with_you
- ベストアンサー率37% (112/301)
#3です。 ＞これだと、ボタン同士の間隔は設定できませんよね？ えっと……「適度」ってのがどれくらいなのかはあなたしか知らないので「marginで調節してください」って書いたんですけど。 思ったことをそのまま投稿する前に一度試すようにしてもらいたいものです。
お礼
ありがとうございます！
- t_ohta
- ベストアンサー率38% (5238/13705)
＞ これだとボタンとボタン間隔が設定できませんよね？ ボタンのマージン（div.button input { margin: 0px 20px; } の部分）で調整できます。
お礼
大変失礼しました！ div.button input ↑見落としていました・・・。 理想の配置ができました。 ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
★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-html401j/struct/global.html#h-7.5.4 )』 その文書構造に基づいてスタイルシートで (注)フロートを使うとブラウザやウィンドウサイズによって崩れる スタイルシート 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/HTML/nav/navigation1.html )
お礼
ありがとうございます！ いくら細かく設定したところで、 そのページを見るブラウザや設定によって見え方が変わってしまうのは重々承知なのですが・・・ そのまま書くと、どうもボタンどうしの余白がせまいのが気になってしまってます。 ありがとうございました！
- play_with_you
- ベストアンサー率37% (112/301)
<input />はインライン要素だからわざわざ<div>でfloatとかしなくていいです。並べて書けば横に並びます。 うろ覚えとかコピペじゃなく、ちゃんと理解しないとそういう無駄なことをしてしまいますので、講座サイトでいいですからきちんと確認しましょう。 で、インラインなので中央寄せは text-align:center でできますよね。 三つのボタンを囲うボックスに設定すればそれでセンタリングできます。 「適度な余白」についてはあなたのさじ加減なのでこちらでは何もいえません。 marginでお好みで調整してください。
お礼
ありがとうございます！ これだと、ボタン同士の間隔は設定できませんよね？ そのあたりで悩んでいます。
- s806099d
- ベストアンサー率34% (17/49)
全体を<div style = "align:center"></div>で囲んでしまうか、 個人的には嫌いなのですが、<center>タグで囲んでしまうとか、どうでしょうか？
お礼
ありがとうございます！ これだと、ボタン同士の間隔は設定できませんよね？ そのあたりで悩んでいます。
お礼
ありがとうございます！ これだとボタンとボタン間隔が設定できませんよね？ そのあたりで悩んでいます。