Question

我试图让表单标签显示在每个表单元素的顶部。我有jsfiddle这样做。

问题是，如何在每行保留其标签的同时获得多个表单元素？

你可以在我的例子中看到我在同一行上有“city，state，zip”，但由于我的CSS中的display: block，它将它们分成不同的行。

label { 
    font-weight:bold;
    display: block;
}

<form>

    <label for="name">Name</label>
    <input type="text" name="name" /><br />

    <label for="email">Email</label>
    <input type="text" name="email" /><br />

    <label for="city">City</label>
    <input type="text" name="city" /> 

    <label for="state">State</label>
    <input type="text" name="state" /> 

    <label for="zip">Zip</label>
    <input type="text" name="zip" /><br />

    <label for="last">Last</label>
    <input type="text" name="last" />

</form>

Answer 1

标记标签/字段对的语义方法是使用DL list：

<form>
    <dl>
        <dt><label for="name">Name</label></dt>
        <dd><input type="text" name="name" id="name" /></dd>

        <dt><label for="email">Email</label></dt>
        <dd><input type="email" name="email" id="email" /></dd>
    </dl>
</form>

使用此代码，您还可以轻松实现所需的演示文稿。

如果您需要在地平线上放置多个标签/字段对，请为每个DL / DT对使用单独的DD：

<form>
    <dl>
        <dt><label for="name">Name</label></dt>
        <dd><input type="text" name="name" id="name" /></dd>
    </dl>
    <dl>
        <dt><label for="email">Email</label></dt>
        <dd><input type="email" name="email" id="email" /></dd>
    </dl>
</form>

并使用float: left或display: inline-block或display: table-cell作为DL（取决于最符合您需求的内容）：

/* Font size zeroed for removing gaps between inline blocks. */
FORM {font-size: 0; }

/* Font size restored for DL. */
FORM DL {
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    /*width: 200px;*/ /* Specify width if needed. */
}

顺便说一句，考虑到for元素的LABEL属性是指标注元素的id属性，而不是name属性。

Answer 2

请写一个css类：

.inline-block-display{
display: inline-block !important;
}

现在将此类添加到要将其添加到同一行的每个元素，如下所示：

<input type="text" name="city" class="inline-block-display" />

Demo

Answer 3

你想要使用的是css'flora'和'clear'

看看这个jsfiddle你会明白的（膨胀你的小提琴）您可以显然编辑宽度以满足您的需求

http://jsfiddle.net/UxPDR/

像这样

.small{
    float:left;
}
.clearleft{
    clear:left;
}

CSS：获取表单标签以显示在表单元素之上（jsfiddle）

3 个答案: