更新的標準CSS 2.1

Firefox

完美的解決方案

首頁

web前端

css教學

span寬度的設置

不言

Jun 12, 2018 am 11:43 AM

span 寬度

在html中如何設定span的寬度？這看起來是個很簡單的問題，似乎用style中的width屬性就可以。

缺省情況下span的寬度設定無效
在html中如何設定span的寬度？這看起來是個很簡單的問題，似乎用style中的width屬性就可以。例如，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

登入後複製

透過試驗以後發現，無效，無論是在Firefox或IE中都無效。

透過查閱CSS2標準中關於width的定義發現，原來CSS中的width屬性並不總是有效的，如果對像是inline對象，width屬性就會被忽略。 Firefox和IE原來是遵循了標準才這麼做的。
修改span為block類型並設定float不是完美解決
在span的CSS中增加display屬性，將span設定為block類型的Element，這樣寬度的確有效了，不過也把前後文字隔在不同行裡面。這樣其實span就完全變成p了。

span { background-color:#ffcc00; display:block; width:150px; }

登入後複製

很多人會建議再增加一個CSS屬性float，這樣的確在某種條件下能解決問題。例如我們的例子中，如果span前面沒有文字，那的確是可行的。但如果有了，前後文字就會連在一起，而span跑到了第二行。

span { 
background-color:#ffcc00; 
display:block; 
float:left; 
width:150px; 
}

登入後複製

button的情況
其實，在Html的各種Element中，的確有既是inline，又能夠設定寬度的情況存在。例如下面程式碼就顯示了button對象，就可以很好的在文字中間出現，並且設定寬度。

<body> 
fixed <button style="width:150px;">width</button> button 
</body>

登入後複製

能不能讓span象button那樣顯示呢？透過CSS2標準中display的定義和inline物件的解釋，發現CSS2標準的製定者把所有的Element在是否屬於inline上做了非此即彼的規定，要么是inline，要么是block，沒有製定button那樣既是inline，又可以像block那樣設定寬度的屬性值。

更新的標準CSS 2.1

再看更新的標準，在CSS2.1標準草案中display的定義中增加了一個叫inline-block的屬性值，針對的恰好是我們面對的這種情形。那就再看看各種瀏覽器的對應。

Firefox

透過display的文檔了解到，inline-block在未來的Firefox 3中會實現。透過Mozllia擴充屬性參考了解到，在Firefox 3以前的版本，例如現在的Firefox 2中，可以用-moz-inline-box達到相同的效果。

IE

透過MSDN中的display文件了解到，inline-block已經實現。實際測試發現IE 6.0以後都沒問題。

完美的解決方案

下面程式碼的CSS定義完美解決了span的寬度設定問題。由於瀏覽器通常對不支援的CSS屬性採取忽略處理的態度，所以最好將display:inline -block行寫在後面，這樣在Firefox裡面，如果到了未來的Firefox 3，這一行就能起作用，程式碼可同時相容各種版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
display:-moz-inline-box; 
display:inline-block; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！