定位標籤和輸入，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; 
}