内嵌表单字段,标签位于顶部

Question

我不敢相信我不得不问这个问题,但是我的智慧结束了.

我正在尝试内联显示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,因此字段显示为内联.有人可以帮忙吗？

Answer 1

我会将每个输入放在一个跨度中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>

Answer 2

您可以使用标签将输入括起来,然后使用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>