html - 用于对齐文本框和标签的 CSS

Question

我正在尝试将我的表单布局从表格中移开并进入 div 和 css 的世界。

我在布局方面遇到了困难。我想对标签直接位于输入上方的元素进行排序。这是它目前的样子:

我希望 District Label 和 Textbox 垂直对齐，但它们似乎形成了一个阶梯图案。

这是CSS:

#content
{
    position: absolute;
    top: 110px;
    left: 350px;
    width: 775px;
    height: 605px;

}

#content label
{
    display:inline;
    margin-right:4px;
    vertical-align:top;
}

#content input
{
    float:left;
    margin:1px 20px 1px 1px;
}

和 HTML:

<div id="content">
        <label for="txt_RequestId">Request Id</label>
        <input id="txt_RequestId" type="text" />

        <label for="txt_District">District</label>
        <input id="txt_District" type="text" />
</div>

Answer 1

嵌套input label 中的元素s 因此文本标签和字段被分组。

此用法在 HTML4 spec 中指定:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

<div id="content">
    <label>
        Request Id<br />
        <input id="txt_RequestId" type="text" />
    </label>

    <label>
        District<br />
        <input id="txt_District" type="text" />
    </label>
</div>

CSS:

#content
{
    position: absolute;
    top: 110px;
    left: 350px;
    width: 775px;
    height: 605px;
}

#content label
{
    display:inline;
    float:left;
    margin-right:4px;
    vertical-align:top;
}

example

然后申请display:inline和 float:left到 <label> s(或者使用 display:inline-block 代替，如果你不必担心旧浏览器 example )