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

Posted 2023-02-24

【中文标题】带有标签的内联表单字段位于顶部

【英文标题】：Inline form fields with labels placed on top

【发布时间】：2011-03-03 18:24:04

【问题描述】：

我不敢相信我不得不问这个，但我已经无计可施了。

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

【参考方案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>

【讨论】：

我喜欢你使用 span 而不是 div。因为它也被 IE 7 支持。

如何使用 dForms 做同样的事情？

【参考方案2】：

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

labeldisplay:inline-block;
inputdisplay:block;

<label>Label 1<input type=text name=foo id=foo /></label>
<label>Label 2<input type=text name=bar id=bar /></label>

【讨论】：

这也有效。 display:inline-block 是解决问题的关键。谢谢！

很好的答案，谢谢。我正在寻找一种通用解决方案，它可以让我在顶部 only 上显示某些输入的标签。对于复选框或收音机没有意义...

有人会问Should I put input tag inside label tag?