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

这会让我

---------           ---------
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,所以字段显示为内联.谁能帮忙？

解决方法

我将每个输入放在一个span中,显示：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>

原文地址：https://www.jb51.cc/html/224259.html