用CSS定位标签和输入

这个怎么样?

div {
    /* either */ margin-left: 110px;
    /* or */     float: left;
}

这在我的机器上有效,在IE8和火狐(我唯一关心的浏览器)上测试过。

label {
    clear:left;
    float:left;
    margin-right:10px;
    text-align:right;
    width:100px;
    border:solid 1px;
}
input {
    float:left;
    border:solid 1px;
}
div {
    float:left;
    border:solid 1px;
}

HTML代码:

    <label>x</label><input type="text" />
    <label>x</label><input type="text" />
    <label>x</label><input type="text" />
    <label>x</label><input type="text" />
    <label>x</label>
    <div>
        <label>y</label><input type="text" />
        <label>y</label><input type="text" />
        <label>y</label><input type="text" />

    </div>

浮动元素使它们呈现为块框,并强制非浮动元素围绕它们流动。DIV是一个块级元素,默认情况下,它的清除设置为“无”,因此它与第一个浮动元素在同一行上呈现,并增长为使用整行,但DIV中的标签元素设置为“左清除”,因此它们清除所有标签/输入元素,并在其下方呈现。

通过将DIV元素设置为像输入一样浮动,它将与其他浮动一起呈现为一个块框。

变化:

input {
    float:left;
}

到:

input, div {
    float:left;
}