在每个 html 上方显示两个输入并带有标签答案

【问题标题】：Display two inputs next to each other with label above each html在每个 html 上方显示两个输入并带有标签
【发布时间】：2013-11-28 06:48:50
【问题描述】：

我想做这样的事情

USER         EMAIL
input        input

但我不知道如何让它以这种方式显示。基本上我希望每组标签 + 输入字段都是一个 div，但我希望这些 div 并排。也许我使用了错误的标签，因为我是一个 html noobie >

【问题讨论】：

使用一点 css 就可以轻松做到这一点。

标签： html css input label css-position

【解决方案1】：

div是块级元素，这意味着它默认会占用整个水平空间，为了并排对齐，你需要float他们否则你需要使用display: inline-block

Demo

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

【讨论】：

谢谢。浮点数将其移到右侧，但是如何将标签保留在输入字段上方？当我使用
时，它会向下移动所有内容，而不仅仅是该块中的元素
是的，这可以是一个选项:)
@user1529956 我贡献了一个解决方案，你可以参考一下:)
谢谢！内联块正是我所需要的。花了太多时间尝试仅使用 html 标签 >.

【解决方案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/

【讨论】：