ホームページで、ボタンを横に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.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.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でお好みで調整してください。
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;
}
お探しの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も見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
ボタンを横に並べて表示させる方法
HTML・CSS
-
python エラー
その他(プログラミング・Web制作)
-
送信ボタン押下時に値が未入力だとエラーにしたい
HTML・CSS
-
-
4
異なるformのsubmitボタンを同一行に
HTML・CSS
-
5
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
6
同じIDで定義した要素の配列を取得したいが
JavaScript
-
7
データベースのINT型項目にNULLはNG?
MySQL
-
8
VB.NETで DataRow()を利用して、値からコードを取得したい。
Visual Basic(VBA)
-
9
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
10
Javaで改行などが出来ないのです。
Java
-
11
HTMLボタンの文字色を変えられますか
HTML・CSS
-
12
テキストボックスに入力された内容を他のテキストボックスにコピーしたい
JavaScript
-
13
html テーブルのセルにリンクを張りたい
その他(コンピューター・テクノロジー)
-
14
ダブルクォーテーションを含む正規表現について。
Java
-
15
複数行のデータのPOST処理に関して
PHP
-
16
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
17
Selectボックスの幅を自動で広げたい
AJAX
-
18
中に<table></table>が使えるアコーディオンを教えて下さい。
HTML・CSS
-
19
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
20
テーブルの任意の列を非表示にしたい
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
HTML属性での「""」 「''」違い
-
html5でheaderの中にnav
-
複数のボタンを等間隔に、かつ...
-
ヘッダーを左右に二分割する方...
-
オシャレな区切り線はありませ...
-
要素間、要素内に隙間が空く
-
body>div{}の意味を知りたい
-
画面を拡大すると横幅が切れる
-
div要素が重なってします
-
divとpの使いわけ
-
iframeを使わずに上下50%ずつに...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
float:leftを使用して全体を中...
-
1時間30分を簡単に表したいで...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報