在1行对齐6个元素（标签+输入，标签+输入，标签+输入）

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创建了2行（'wall'），每行有6列（'panel'）。

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

如果你想让它全部在一行中溢出，那么棘手的部分就是确保它在逻辑上划分行的边距。

另一方面，您始终可以使用HTML table ...

Answer 2

最简单的方法是创建一个表并将所有表放入此表

<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>