
HTML(5)で以下のソースに対して
<form>
<input type="text" id="1">
<input type="text" id="2">
</form>
<form>
<input type="text" id="3">
<input type="text" id="4">
</form>
CSS
form {display:inline}
input {display:block}
と書いた場合に、縦二列、横二列の表示が得られると期待したのですが
全て縦に並んでしまいました。
期待は左の列にid=1, 2が縦に並び、id=3, 4がその横に並ぶ感じです。
1 3
2 4
何か基本的な理解が抜けている気もしているのですがちょっとわからずお力を貸していただけないでしょうか。
なぜこうなってしまうのか仕組みも知りたいので理由を加えて教えていただけると助かります。
簡易的なサンプルコードを記載いたします。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<form>
<input type="text" id="1">
<input type="text" id="2">
</form>
<form>
<input type="text" id="3">
<input type="text" id="4">
</form>
</body>
</html>
css
form{display:inline;}
input{display:block;}
関係あるかわかりませんがchrome21とFirefox14を使っています。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
もっとも大事なこと!!
「メモ: 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 … )
以上二つの結果、内容のない行内要素とブロック要素が4つになりますから、すべて改行されて一行開けて縦に並ぶはずです。そのように指定したのですから、そのとおりの結果になると言うことです。
通常、二つのブロックを横に並べる場合は、ブロックの幅(ブロック要素は幅を指定できます。)を狭くして、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 ****>で制御したほうがよいかと。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
既婚男女の方、結婚前と結婚後...
-
aの中にspan
-
テンソル解析(絶対微分学)は...
-
HTMLページ上でiframeを最前面...
-
C言語線形リストの問題です
-
改行ほどは行かないけど、若干...
-
emとstrongの反対
-
ブロガーでウェブクリップアイコン
-
CSS:overflow要素の印刷について
-
Bootstrap レスポンシブ textarea
-
CSSのa:hoverが急に一部だけ効...
-
ホームページの下にあるcopy ri...
-
cssで文字サイズ指定、ptでもpx...
-
Macで画像の切り抜きできないの?
-
オシャレな区切り線はありませ...
-
個別にリンクの色を変える方法
-
疑似クラス :activeが効きません
-
CSSがなぜかfont-sizeだけ効か...
-
訪問済のリンク色を変えない方法
-
画像をクリックして同じページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テンソル解析(絶対微分学)は...
-
含む含まないという概念自体の...
-
見た目と声さえ良ければ、他の...
-
既婚男女の方、結婚前と結婚後...
-
smallにtext-allignが効かない
-
1から100までの自然数のうち、2...
-
改行ほどは行かないけど、若干...
-
NからZへの全単射を具体的に構...
-
aの中にspan
-
input type="hidden"で取得した...
-
マージソートの計算量について-...
-
角丸画像の背景色を透明にした...
-
HTML の繰返し法???
-
【ヒトの神秘】美男美女から何...
-
textareaの幅を画面と合わせたい
-
CSSで改行後の行間調整
-
HTMLページ上でiframeを最前面...
-
質問1.
-
html タグの閉じスラッシュ前の...
-
tdに対してmin-heightの定義、...
おすすめ情報