- ベストアンサー
HTML(5)で2つのFormを横並びに表示する方法
- HTML(5)のソースコードにおいて、2つのFormを横並びに表示させたい場合、CSSのdisplayプロパティを使用します。
- 具体的には、Form要素に対してdisplay:inline;を設定し、input要素に対してdisplay:block;を設定します。
- しかし、質問者のコードを実行した結果、全てのinput要素が縦に並ぶだけでなく、横並びに表示されませんでした。
- sarusearch
- お礼率72% (103/142)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
もっとも大事なこと!! 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」 そもそもHTMLが間違っています。期待通りに機能するはずもありません。 →HTMLの要素には「ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )」の区別があります。 これはスタイルシートで変更した結果についても当てはまります。すなわち 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから デフォルトでは、ブロックレベル要素は行内要素とは異なるように整形される。 一般に、ブロックレベル要素は新しい行を開始し、行内要素は新しい行を開始しない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )］より 理解し難い場合は 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/visuren.html#inline-formatting ) 以上二つの結果、内容のない行内要素とブロック要素が４つになりますから、すべて改行されて一行開けて縦に並ぶはずです。そのように指定したのですから、そのとおりの結果になると言うことです。 通常、二つのブロックを横に並べる場合は、ブロックの幅(ブロック要素は幅を指定できます。)を狭くして、positionないしfloatで位置を指定します。inline-blockの場合は幅指定だけでよいです。 →'display' ( http://www.w3.org/TR/CSS2/visuren.html#propdef-display ) 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 ****>で制御したほうがよいかと。
お礼
大変丁寧なご回答ありがとうございました。 理解できました！ ご私的の通り、Submit先が別となっていたので2つございます。