显示两个相邻的输入，每个 html 上方带有标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20259472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display two inputs next to each other with label above each html
提问by user1529956
I want to do something like this
我想做这样的事情
USER EMAIL
input input
But I can't figure how to get it to display this way. Basically I want each set of label + input field to be a div, but I want the divs to be side by side. Perhaps I'm using the wrong tags because I'm an html noobie ><
但我不知道如何让它以这种方式显示。基本上我希望每组标签 + 输入字段都是一个 div，但我希望 div 并排。也许我使用了错误的标签，因为我是 html noobie ><
回答by Mr. Alien
divis a block level element, that means it will take entire horizontal space by default, inorder to align them side by side, you need to floatthem else you need to use display: inline-block
div是块级元素，这意味着默认情况下它将占用整个水平空间，为了将它们并排对齐，您需要使用float它们否则您需要使用display: inline-block
HTML
HTML
<div>
<label>Hello</label>
<input type="text" />
</div>
<div>
<label>Hello</label>
<input type="text" />
</div>
CSS
CSS
div {
display: inline-block;
}
div label {
display: block;
}
回答by Pankaj Singh
if you want to use tag, then you can achieve your desired result by following code--
如果你想使用标签，那么你可以通过以下代码实现你想要的结果——
<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>
the output is shown here --- http://jsfiddle.net/hn3U9/
输出显示在此处 --- http://jsfiddle.net/hn3U9/
