２個のFormを横並びにしたい

Question

HTML(5)で以下のソースに対して CSS form {display:inline} input {display:block} と書いた場合に、縦二列、横二列の表示が得られると期待したのですが全て縦に並んでしまいました。期待は左の列にid=1, 2が縦に並び、id=3, 4がその横に並ぶ感じです。 1 3 2 4 何か基本的な理解が抜けている気もしているのですがちょっとわからずお力を貸していただけないでしょうか。なぜこうなってしまうのか仕組みも知りたいので理由を加えて教えていただけると助かります。簡易的なサンプルコードを記載いたします。 css form{display:inline;} input{display:block;} 関係あるかわかりませんがchrome21とFirefox14を使っています。よろしくお願いします。

ORUKA1951 · Accepted Answer

もっとも大事なこと!!

「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_ … )」
　そもそもHTMLが間違っています。期待通りに機能するはずもありません。
→HTMLの要素には「ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の区別があります。
　これはスタイルシートで変更した結果についても当てはまります。すなわち
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　理解し難い場合は
form,input{border:solid 1px gray;padding:5px;}
input{border-color:red;}
を書き加えてみると良いでしょう。

★行内要素の内部にブロック要素は入りません。
★行内要素の幅は内容によって変わります。
　　→行ボックスの幅は包含ブロックによって、高さは[10.8 行の高さを計算する]で述べる規則に従って決まる。 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　以上二つの結果、内容のない行内要素とブロック要素が４つになりますから、すべて改行されて一行開けて縦に並ぶはずです。そのように指定したのですから、そのとおりの結果になると言うことです。

　通常、二つのブロックを横に並べる場合は、ブロックの幅(ブロック要素は幅を指定できます。)を狭くして、positionないしfloatで位置を指定します。inline-blockの場合は幅指定だけでよいです。
　→'display' ( http://www.w3.org/TR/CSS2/visuren.html#propdef-d … )
　　CSS2.1で変更になっていますから、CSS2.1のdisplayの値です。

1) HTMLを修正します。inputは行内要素ですからブロック要素内に入ります。
<div class="form">
　<form action="./">
　　<p>
　　　<input type="text" name="abc" size="20" value="abc">
　　</p>
　　<p>
　　　<input type="text" name="efg" size="20" value="efg">
　　</p>
　</form>
　<form action="./">
　　<p>
　　　<input type="text" name="hij" size="20" value="hij">
　　</p>
　　<p>
　　　<input type="text" name="klm" size="20" value="klm">
　　</p>
　</form>
</div>
2)CSSは可能な限り、ブロック→行内、その逆はしないほうが良い。
form{display:inline-block;width:40%;}
あるいは
div.form{position:relative;}
form{width:48%;}
form+form{position:absolute;top:0;right:0;}
または、(非推奨)
form{float:left;width:48%;}

★なぜフォームが二つあるのですか、提出先が同じなら、提出ボタン(input type="submit",<button ****>で制御したほうがよいかと。

2)CSSは可能な限り、ブロック→行内、その逆はしないほうが良い。 form{display:inline-block;width:40%;} あるいは div.form{position:relative;} form{width:48%;} form+form{position:absolute;top:0;right:0;} または、(非推奨) form{float:left;width:48%;} ★なぜフォームが二つあるのですか、提出先が同じなら、提出ボタン(input type="submit",

２個のFormを横並びにしたい

もっとも大事なこと!!

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

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

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