Html 标签位于顶部的内联表单字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3041615/
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
Inline form fields with labels placed on top
提问by rcourtna
I can't believe I'm having to ask this, but I'm at my wit's end.
我不敢相信我不得不问这个，但我已经无能为力了。
I'm trying to display 2 form fields inline, but with the label for each field on the top. In ascii art:
我正在尝试内联显示 2 个表单字段，但每个字段的标签都在顶部。在 ascii 艺术中：
Label 1 Label 2
--------- ---------
| | | |
--------- ---------
Should be pretty simple.
应该很简单。
<label for=foo>Label 1</label>
<input type=text name=foo id=foo />
<label for=bar>Label 2</label>
<input type=text name=bar id=bar />
This will get me:
这会让我：
--------- ---------
Label 1 | | Label 2 | |
--------- ---------
To get the labels on top of the boxes, I add display=block:
为了获得框顶部的标签，我添加了 display=block：
<label for=foo style="display:block">Label 1</label>
<input type=text name=foo id=foo />
<label for=bar style="display:block">Label 2</label>
<input type=text name=bar id=bar />
After I do this, the labels are where I want them, but the form fields are no longer inline:
执行此操作后，标签位于我想要的位置，但表单字段不再内联：
Label 1
---------
| |
---------
Label 2
---------
| |
---------
I've been unable to find a way to wrap my html so the fields display inline. Can anyone help?
我一直无法找到包装我的 html 的方法，因此这些字段显示为内联。任何人都可以帮忙吗？
回答by Raugturi
I would put each input inside an span with display:inline-block, like this:
我会将每个输入放在一个带有 的跨度内display:inline-block，如下所示：
<span style="display:inline-block">
<label for=foo style="display:block">Label 1</label>
<input type=text name=foo id=foo />
</span>
<span style="display:inline-block">
<label for=bar style="display:block">Label 2</label>
<input type=text name=bar id=bar />
</span>
回答by edl
You could enclose your inputs in with the labels and then use CSS:
您可以用标签将输入括起来，然后使用 CSS：
label{display:inline-block;}
input{display:block;}<label>Label 1<input type=text name=foo id=foo /></label>
<label>Label 2<input type=text name=bar id=bar /></label>