爲什麼標籤的CSS屬性不能在沒有浮動的情況下工作？

我是新來的CSS，我有一個問題。我想成爲一個好簡單的形式，並有下面的代碼：爲什麼標籤的CSS屬性不能在沒有浮動的情況下工作？

<form> 
    <div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div> 
    <div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div> 
</form>

一些CSS代碼：

label { 
    float: left; 
    width: 230px; 
    text-align: right; 
    margin: 5px; 
} 

.row { 
    clear: left; 
}

我複製和一些書粘貼此代碼。我理解浮動，清除，但我不明白爲什麼「寬度」屬性工作與標籤（因爲它內聯元素），在這種情況下，爲什麼不「寬度」工作沒有「浮動」？請讓我清楚。謝謝

來源

2013-08-18 user2218845

http://stackoverflow.com/questions/4776121/floating-with-css-is-a-width-required – 2013-08-18 09:44:28

謝謝，但我的第一個問題是爲什麼「寬度」工作，在網上「標籤「元素？ – user2218845

正如寬度不適用於''元素。內聯元素除非明確聲明爲'inline-block'或'block'，否則不會對'width'做出反應。 –

標籤元素默認爲inline顯示模式。

行內元素不接受寬度屬性，它們將以其內容的寬度呈現。

另一方面，浮動元素就像行內塊一樣。他們會接受寬度屬性。

通過對元素應用float屬性，您實質上將其display屬性更改爲類似（但不完全）inline-block之類的內容。

來源

2013-08-18 09:52:18 Rodik

它可能會出現*，但是按照規範，浮動的內聯是**塊**：['display'，'position'和'float']之間的關係（http://www.w3.org/TR /CSS2/visuren.html#dis-pos-flo）（CSS2.1） – FelipeAls

label是內聯元素，所以它不接受寬度。要接受任何元素的寬度，它應該是inline-block或block元素。並通過設置浮點數到任何元素的行爲就像這是一個inline-block元素，也爲您定位絕對或固定的另一個信息也認爲它是一個塊級元素。

如果您想使label接受您應該定義標籤的寬度爲inline-block。

label { 
    /*float: left;*/ 
    display: inline-block; 
    width: 230px; 
    text-align: right; 
    margin: 5px; 
}

來源

2013-08-18 09:57:14

與其他答案相同的註釋：float是float且position是位置，並帶有顯示結果。 – FelipeAls

爲什麼標籤的CSS屬性不能在沒有浮動的情況下工作？

回答

相關問題