我不敢相信我不得不问这个,但我已经无计可施了。
我试图以内联方式显示 2 个表单字段,但每个字段的标签都在顶部。在 ascii 艺术中:
Label 1 Label 2
--------- ---------
| | | |
--------- ---------
应该很简单。
<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 />
这会让我:
--------- ---------
Label 1 | | Label 2 | |
--------- ---------
为了让标签位于框的顶部,我添加了 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 />
在我这样做之后,标签就在我想要的位置,但表单字段不再是内联的:
Label 1
---------
| |
---------
Label 2
---------
| |
---------
我一直无法找到一种方法来包装我的 html,以便内联显示字段。谁能帮忙?
最佳答案
我会将每个输入放在一个带有 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>
关于html - 标签位于顶部的内联表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3041615/