爲什麼寬度：200px應用於此標籤？

Question

在this example中，我將表單標籤設置爲width:200px。 由於某些原因未應用此功能，並且在Chrome開發工具中查看時該字段顯示爲0寬度。

任何想法爲什麼？

Answer 1

label是一個內聯元素，像span。它沒有寬度，但隨其內容一起流動。爲了得到它表現得像一個div，你必須指示它就像一個塊級元素作用：

display: block 

從那裏，你可以添加寬度：

width: 200px; 
float: left; 

Answer 2

這是因爲標籤是inline element，所以沒有寬度屬性。要設置你需要使它塊或內聯塊元素的寬度：

#form label { 
    display: block; 
    width: 200px; 
} 

Answer 3

標籤是一個內嵌元素，所以你不能應用一個固定的寬度（除非你改變它的顯示行爲）。如上文見此處查看選項/瀏覽器兼容性

http://www.quirksmode.org/css/display.html

Answer 4

的快速的地圖，你需要讓你的標籤，像一個block元素讓它尊重你width聲明。要做到這一點，最簡單的方法是將其設置爲inline-block這樣的：

#form label { 
    width:200px; 
    display: inline-block; 
} 

或者，作爲@大衛提到，浮動它離開。 This article描述讓這個工作跨瀏覽器。