将两个输入框并排显示，每个输入框上方有相应的标签。HTML实现。

Question

我想做类似于这样的事情

USER         EMAIL
input        input

但是我不知道如何实现这种显示方式。基本上，我想让每组标签+输入字段成为一个div，但我希望这些div并排而列。也许是因为我是一个html新手，所以使用了错误的标记。

- user1529956

---

只需要一点点的CSS，你就可以轻松地做到这一点。 - Ringo

Answer 1

div是一个块级元素，这意味着默认情况下它会占据整个水平空间。如果想要将它们侧边对齐，你需要使用float，否则你需要使用display: inline-block

演示

HTML

<div>
    <label>Hello</label>
    <input type="text" />
</div>
<div>
    <label>Hello</label>
    <input type="text" />
</div>

CSS

的翻译是：层叠样式表。

div {
    display: inline-block;
}

div label {
    display: block;
}

- Mr. Alien

---

谢谢。浮动可以将其放在右侧，但是我如何保持标签位于输入字段上方？当我使用<br>时，它会使所有元素下移，而不仅仅是该块中的元素。 - user1529956

是的，这可以是一个选项 :) - Dinesh Kanivu

@user1529956 我提供了一个解决方案，你可以参考一下 :) - Mr. Alien

谢谢！inline-block正是我所需要的。花了太多时间试图只用HTML标签来实现它 >.< - user1529956

Answer 2

如果您想使用标签，那么您可以通过以下代码实现所需的结果--

<table>
<tr>
    <td>USER</td>
    <td>EMAIL</td>
</tr>
<tr>
    <td><input type="text" name="user"></td>
    <td><input type="text" name="email"></td>
</tr>
</table>
                               

这里显示输出结果 --- http://jsfiddle.net/hn3U9/

- Pankaj Singh