重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

複数のボタンを等間隔に、かつ中央に配置する

解決済

  • 質問者：masunona
  • 質問日時：
  • 回答数：7件

ホームページで、ボタンを横に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件)

No.1ベストアンサー

  • 回答者： t_ohta
  • 回答日時：

<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
    • 10
    • 件
通報する
この回答へのお礼

ありがとうございます！

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

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

通報する
お礼日時：2013/08/05 10:51

No.7

  • 回答者： s806099d
  • 回答日時：

<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

No.6

#3です。


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

ありがとうございます！

通報する
お礼日時：2013/08/05 13:20

No.5

  • 回答者： t_ohta
  • 回答日時：

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



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

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

通報する
お礼日時：2013/08/05 13:19

No.4

  • 回答者： ORUKA1951
  • 回答日時：

★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

No.3

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

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

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

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

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

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

通報する
お礼日時：2013/08/05 10:53

No.2

  • 回答者： s806099d
  • 回答日時：

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


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

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

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

通報する
お礼日時：2013/08/05 10:52

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

Q質問する（無料）

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

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

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

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報