定位标签和输入，CSS

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是一个块级元素，默认情况下它的clear属性设置为none，因此它在与第一个浮动元素相同的线上呈现，并且增长为消耗整条线，但div内的标签元素设置为向左清晰以便清除所有的标签/输入元素，并在它下面呈现。

通过将div元素设置为像输入一样浮动，它将被渲染为与其他浮动块内嵌的块框。

变化：

input { 
    float:left; 
} 

到：

input, div { 
    float:left; 
}