Question

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

我在布局方面遇到了困难。我想订购标签直接位于输入上方的元素。这是目前的样子： Screenshot

我希望区域标签和文本框垂直对齐，但它们似乎正在形成一个阶梯图案。

这是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中，以便对文本标签和字段进行分组。

此用法在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>（或使用display:inline-block代替，如果您不必担心旧浏览器example）

Answer 2

更改此

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

到这个

#content input
{
    display:inline;
    margin:1px 20px 1px 1px;
}

即删除float:left并替换为display:inline;。

示例：http://jsfiddle.net/jasongennaro/ptKEh/

修改

@mdmullinax指出问题还要求文本在输入字段上方

错过了; - ）

在这种情况下，请删除display规则并使用三个br s

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

修订示例：http://jsfiddle.net/jasongennaro/ptKEh/2/

Answer 3

我通常使用表格来表示这样的表格。它们比CSS（IMO）更容易使用，结构更清晰。

<table>
    <tr>
        <td>
            <label for="txt_RequestId">Request Id</label>
            <br /><input id="txt_RequestId" type="text" />
        </td>
        <td>
            <label for="txt_District">District</label>
            <br /><input id="txt_District" type="text" />
        </td>
    </tr>
</table>

CSS非常适合在容器周围移动元素。但是，当您希望以非常规的方式定位事物时，依赖于其他元素，它可以真正模糊逻辑。 <table>对此更明确。

用于对齐TextBox和Label的CSS

3 个答案: