html - 1 行に 6 つの要素を配置 (Label+Input、Label+Input、Label+Input)

Question

ユーザーの入力をキャプチャするビューを作成したかったのです。私は含まれる多くのフィールドを持っています。基本的に水平に同時に3つのフィールドに分けます。サンプル画像はこちら。

HTMLでMVC 4ビューを使用しています。助けてください！

Answer 1

これが生の HTML の場合:

<form action="">
  <p>First Name</p>
  <input type="text" name="fname" />
  <p>Middle Name</p>
  <input type="text" name="mname" />
  <p>Last Name</p>
  <input type="text" name="lname" />
  <p>Age</p>
  <input type="text" name="age" />
  <p>Gender</p>
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <p>Phone Number</p>
  <input type="text" name="fname" />
</form>

CSS を使用してページのスタイルを設定できます。

このリンクをチェックしてください。CSS を使用して、各行に 6 つの列 (「パネル」) を持つ 2 つの行 (「壁」) を作成します。

http://jsfiddle.net/chiperific/kFr4h/

すべてをオーバーフローする 1 つの行に収めたい場合、注意が必要な部分は、行を論理的に分割するための余白です。

一方、いつでもHTML テーブルを使用できます...

Answer 2

The most easy way is create a table and place all of them into this table

<table>
    <tr>
        <td>First Name</td><td><input type="text" name="fname" /></td>
        <td>First Name</td><td><input type="text" name="fname" /></td>
        <td>First Name</td><td><input type="text" name="fname" /></td>
    </tr>
    <tr>
        <td>First Name</td><td><input type="text" name="fname" /></td>
        <td>First Name</td><td><input type="text" name="fname" /></td>
        <td>First Name</td><td><input type="text" name="fname" /></td>
    </tr>
</table>