1

我试图让表单标签显示在每个表单元素的顶部。我有完成此操作的jsfiddle。

问题是，如何在每行获取多个表单元素的同时将其标签保持在其正上方？

您可以在我的示例中看到我如何将“城市、州、邮编”全部放在同一行，但由于display: block在我的 CSS 中，它会将它们分成单独的行。

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

3 回答 3

3

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

<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-cellfor 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属性是指标记元素的属性，而不是它的属性。LABELidname

于 2012-11-11T11:50:01.290 回答
1

请写一个CSS类：

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

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

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

演示

于 2012-11-11T11:46:27.787 回答
0

您要使用的是 css 'float' 和 'clear'

看看这个 jsfiddle 你就会明白（扩展你的小提琴）你显然可以编辑宽度以满足你的需要

http://jsfiddle.net/UxPDR/

像这样

.small{
    float:left;
}
.clearleft{
    clear:left;
}
于 2012-11-11T11:44:22.087 回答