html - 在 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 行（“墙”），每行有 6 列（“面板”）。

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

如果您希望所有内容都在溢出的一行中，那么棘手的部分是边距，以确保它在逻辑上划分行。

另一方面，您始终可以使用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>