Question

我已经实现了这个（表单布局）...

form layout http://www.stan.com.mx/images/CSSDoubt1.gif

...使用下一个CSS ...

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

但是我试图做其他事情而没有成功......

form layout http://www.stan.com.mx/images/CSSDoubt2.gif

它就像一个 sub 形式，使用相同的布局代替输入。

有一个解决方案吗？

Answer 1

这个怎么样？

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

Answer 2

这适用于我的机器，在IE8和Firefox（我唯一关心的浏览器）上进行测试

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>

Answer 3

浮动元素会将它们渲染为块框并强制非浮动围绕它们流动。 div是一个块级元素，默认情况下它被清除设置为none，因此它在与第一个浮动元素相同的行上呈现并且增长以消耗整行，但div中的标签元素被设置为向左清除以便它们清除所有标签/输入元素都在其下面呈现。

通过将div元素设置为像输入一样浮动，它将呈现为与其他浮点内联的块框。

变化：

input {
    float:left;
}

为：

input, div {
    float:left;
}

使用CSS定位标签和输入

3 个答案: