

ホームページで、ボタンを横に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;
}
上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
<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;
}
No.7
- 回答日時:
<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>
とりあえず適当に書きました。インデントきると改行でおかしくなるので、つけてません。
はっつけて実行してみてください。
No.5
- 回答日時:
> これだとボタンとボタン間隔が設定できませんよね?
ボタンのマージン(div.button input { margin: 0px 20px; } の部分)で調整できます。
大変失礼しました!
div.button input
↑見落としていました・・・。
理想の配置ができました。
ありがとうございました!
No.4
- 回答日時:
★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 … )
ありがとうございます!
いくら細かく設定したところで、
そのページを見るブラウザや設定によって見え方が変わってしまうのは重々承知なのですが・・・
そのまま書くと、どうもボタンどうしの余白がせまいのが気になってしまってます。
ありがとうございました!
No.3
- 回答日時:
<input />はインライン要素だからわざわざ<div>でfloatとかしなくていいです。
並べて書けば横に並びます。うろ覚えとかコピペじゃなく、ちゃんと理解しないとそういう無駄なことをしてしまいますので、講座サイトでいいですからきちんと確認しましょう。
で、インラインなので中央寄せは
text-align:center
でできますよね。
三つのボタンを囲うボックスに設定すればそれでセンタリングできます。
「適度な余白」についてはあなたのさじ加減なのでこちらでは何もいえません。
marginでお好みで調整してください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html の divとtable の役割
-
CSSで、contentsがfooterに重な...
-
1時間30分を簡単に表したいで...
-
複数のボタンを等間隔に、かつ...
-
htmlのolやulなどlistにtitleや...
-
スペースを使わず文字位置を揃...
-
html5でheader,footerこみのwra...
-
開始タグと終了タグについて
-
含む含まないという概念自体の...
-
ある要素の中身を全部グレーア...
-
【ヒトの神秘】美男美女から何...
-
ボタンをセル内一杯に表示させ...
-
HTML5のfooterに見出しを付けて...
-
訪問済のリンク色を変えない方法
-
マウスカーソルを当てた時だけ...
-
<h1>、<h2>と<p><div>の行間を...
-
htmlの文字が縦書きになる
-
divタグ内のコンテンツが重なっ...
-
外部スタイルシートで定義した...
-
CSSで背景画像を一番下にもって...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
1時間30分を簡単に表したいで...
-
HTML属性での「""」 「''」違い
-
min-heightとheightの違いについて
-
スペースを使わず文字位置を揃...
-
ヘッダーとフッターだけ背景を...
-
セクションをdivで囲むと見出し...
-
<!-- #BeginLibraryItemとは
-
【html&css】太さの違う2本線の...
-
ヘッダーを左右に二分割する方...
-
HTMLのバリデーション
-
<div id="container">の使いか...
-
フッタの背景画像をリピートxで...
-
HP製作を仕事にしたく相談です。
-
グリッドレイアウトで"auto-fit...
-
</div>は、どのdivに対しての終...
-
html5でheader,footerこみのwra...
-
h1を親要素の縦中央、画像の横...
おすすめ情報