带有放置在顶部的标签的内联表单字段 [英] Inline form fields with labels placed on top

问题描述

我不敢相信我得问这个，但我在我的机智的尽头。

I can't believe I'm having to ask this, but I'm at my wit's end.

我想显示2个表单字段内联，但在顶部每个字段的标签。在ascii art：

I'm trying to display 2 form fields inline, but with the label for each field on the top. In ascii art:

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：

To get the labels on top of the boxes, I add 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 />

我这样做后，标签是我想要的位置，但表单字段不再内联：

After I do this, the labels are where I want them, but the form fields are no longer inline:

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

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

我无法找到方式来包装我的HTML，所以字段显示内联。

I've been unable to find a way to wrap my html so the fields display inline. Can anyone help?

推荐答案

我会把每个输入放在一个跨度内 display：inline-block ，如下所示：

I would put each input inside an span with display:inline-block, like this:

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

这篇关于带有放置在顶部的标签的内联表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！