我不敢相信我不得不问这个问题,但是我的智慧结束了.
我正在尝试内联显示2个表单字段,但顶部的每个字段都有标签.在ascii艺术:
Label 1 Label 2
--------- ---------
| | | |
--------- ---------
Run Code Online (Sandbox Code Playgroud)
应该很简单.
<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 />
Run Code Online (Sandbox Code Playgroud)
这会让我:
--------- ---------
Label 1 | | Label 2 | |
--------- ---------
Run Code Online (Sandbox Code Playgroud)
要在框顶部获取标签,我添加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 />
Run Code Online (Sandbox Code Playgroud)
执行此操作后,标签就是我想要的位置,但表单字段不再是内联的:
Label 1
---------
| |
---------
Label 2
---------
| |
---------
Run Code Online (Sandbox Code Playgroud)
我一直无法找到一种方法来包装我的HTML,因此字段显示为内联.有人可以帮忙吗?
小智 26
我会将每个输入放在一个跨度中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>
Run Code Online (Sandbox Code Playgroud)
edl*_*edl 17
您可以使用标签将输入括起来,然后使用CSS:
label{display:inline-block;}
input{display:block;}
Run Code Online (Sandbox Code Playgroud)
<label>Label 1<input type=text name=foo id=foo /></label>
<label>Label 2<input type=text name=bar id=bar /></label>
Run Code Online (Sandbox Code Playgroud)