重要なお知らせ

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

10ギガ光回線 OCN×ドコモ光

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

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

解決済

質問者：masunona
質問日時：2013/08/02 16:45
回答数：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;
}

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

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

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： t_ohta
回答日時：2013/08/02 16:58

<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;
}

- 10
- 件

この回答へのお礼

ありがとうございます！

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

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

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

No.7

回答者： s806099d
回答日時：2013/08/05 12:07

<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>

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

- 3
- 件

この回答へのお礼

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

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

No.6

回答者： play_with_you
回答日時：2013/08/05 11:55

#3です。

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

- 3
- 件

この回答へのお礼

ありがとうございます！

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

No.5

回答者： t_ohta
回答日時：2013/08/05 11:17

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

ボタンのマージン（div.button input { margin: 0px 20px; }　の部分）で調整できます。

- 1
- 件

この回答へのお礼

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

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

No.4

回答者： ORUKA1951
回答日時：2013/08/02 17:22

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

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

[HTML]タブの代わりに全角スペースでインデントさせています。
<div class="header">
　<div class="nav">
　　<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 … )

- 0
- 件

この回答へのお礼

ありがとうございます！

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

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

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

No.3

回答者： play_with_you
回答日時：2013/08/02 16:59

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

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

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

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

- 0
- 件

この回答へのお礼

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

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

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

No.2

回答者： s806099d
回答日時：2013/08/02 16:59

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

個人的には嫌いなのですが、<center>タグで囲んでしまうとか、どうでしょうか？

- 0
- 件

この回答へのお礼

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

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

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

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

質問する（無料）

似たような質問が見つかりました

JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
JavaScript 入力フォームの javascript でメールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、入力フォームから受け取っ 2 2022/05/10 16:45
HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
JavaScript Javascript初心者｜jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08

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

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

ページトップ

おすすめ情報

・漫画をレンタルでお得に読める！

質問する（無料）

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

4 HTMLでクロス抽出したい

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

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

おすすめ情報