html – 标签放置在顶部的内联表单域

发布时间：2020-12-14 19:34:05 所属栏目：资源来源：网络整理

导读：我不敢相信我不得不问这个问题,但是我在机智的尽头. 我试图以内联方式显示2个表单字段,但在顶部显示每个字段的标签.在ascii艺术： Label 1 Label 2--------- ---------| | | |--------- --------- 应该很简单 label for=fooLabel 1/labelinput type=text nam

我不敢相信我不得不问这个问题,但是我在机智的尽头.

我试图以内联方式显示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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!