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

我不敢相信我会问这个问题，但我已经不知所措了

我试图内联显示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 />

为了获得框顶部的标签，我添加了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 />

---

我一直找不到一种方法来包装我的html，使字段以内联方式显示。有人能帮忙吗？

我会用

显示：内联块

将每个输入放在一个范围内，如下所示：

<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>

标签1
标签2

您可以用标签将输入内容括起来，然后使用CSS：

标签{显示：内联块；}
输入{display:block；}

标签1

---

标签2这也适用。显示：内联块是解决问题的关键。谢谢回答得好，谢谢。我正在寻找一个通用的解决方案，它可以让我只为一些输入在顶部显示标签。这对复选框或收音机没有意义…有人可能会问我喜欢使用span而不是div。因为IE 7也支持它。如何使用dForms实现同样的功能？

Label 1  
---------
|       |
---------

Label 2  
---------
|       |
---------

<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>