該文講述如何設定 HTML span 寬度。
預設情況 HTML 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就完全變成了div。
span { background-color:#ffcc00; display:block; width:150px;}
點選連結查看效果
很多人會建議再增加一個CSS 屬性 float，這樣的確在某種條件下能解決問題。比如我們的例子中，如果span前面沒有文字，那的確是可行的。但是如果有了，前後文字就會連在一起，而span跑到了第二行。
span { background-color:#ffcc00; display:block; float:left; width:150px;}
點選連結查看效果
HTML 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 達到同樣的效果。
通過MSDN中的display文檔瞭解到，inline-block已經實現。實際測試發現IE 6.0及以上版本都沒問題。
設定 span 寬度的完美解決方案下面代碼的 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>
點選連結查看效果
作者或編者：蠶估 最新動向日期：2008-5-22參考來源：www.BlaBla.cnStart building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
