2010-05-12 79 views
119

標籤標籤沒有屬性'寬度',所以我應該如何控制標籤標籤的寬度?如何控制標籤標籤的寬度?

+7

標籤是一個內聯元素,它不能有寬度值;爲了做到這一點,你需要把'display:block'或'float:left'。 – 2010-05-12 16:10:26

回答

151

使用CSS,當然...

label { display: block; width: 100px; } 

width屬性已被棄用,CSS應始終用來控制這類表象的風格。

+4

但是這會導致代碼中斷,這可能是OP **首先不需要的。 – 2010-05-12 16:07:41

+43

@Konrad然後OP可以使用'float'或'display:inline-block' – 2010-05-12 16:08:12

+2

是的,這就是我想要的。 :-)這是這裏的核心部分,因爲它是困難的部分。僅僅設置'width'不會有太大用處。 – 2010-05-12 21:12:42

27

顯示內聯元素(如SPAN,LABEL等),以便瀏覽器根據其內容計算它們的高度和寬度。如果你想控制高度和寬度,你必須改變這些元素的塊。

display: block;使該元素顯示爲一個實體塊(如DIV標記),這意味着元素(它不是內聯)後有一個換行符。儘管您可以使用display: inline-block來解決換行問題,但此解決方案在IE6中不起作用,因爲IE6無法識別內聯塊。如果你希望它是跨瀏覽器兼容的,那麼看看這篇文章:http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

71

使用內聯塊更好,因爲它不會強制剩下的元素和/或控件繪製在一個新行中。

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

OR 

label { 
    width:200px; 
    display: inline-flex; 
} 

OR 

label { 
    width:200px; 
    display: inline-table; 
} 
5

給予寬度到標籤不是一種合適的方式。你應該採取一個div或表格結構來管理這個。但仍然如果你不想改變你的整個代碼,那麼你可以使用下面的代碼。

label { 
    width:200px; 
    float: left; 
} 
+0

控制標籤元素寬度的「給標籤寬度不正確」?你確定? – Oriol 2015-08-10 14:06:34

+0

是的。因爲當我們想要創建一些佈局或特定的結構,那麼div和table屬性就可以使用。標籤並不意味着給予寬度或高度......因此,如果我們使用某些不意味着這樣做的東西,它會以某種方式開始創建問題。 我希望我現在有道理。 – 2015-08-10 14:13:09

0

您可以給類名的所有標籤,這樣都可以有相同的寬度:

.class-name { width:200px;} 

.labelname{ width:200px;} 

,或者你可以標記的簡單得平安

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