html - 标签位于顶部的内联表单字段

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>