２個のFormを横並びにしたい
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を使っています。
よろしくお願いします。
お礼
すごくおそくなってすいません。 どうもありがとうございます。