在默認情況下，由於span是行標簽，設置width是無效的。只有改變display的屬性，才可以實現設置寬度。
1.初步想法
| span{ background-color:#ccc; display:block; width:50px; } |
如果想span單獨成行，不與前后內容鏈接，可以這樣寫。如果不想如此，還需修改：
2、再次修改，用上float，變成同行
| span{ background-color:#ccc; display:block; float:left; width:50px; }
|
但如果span前面沒有文字，那的確是可行的。但是如果有了，前后文字就會連在一起，而span跑到了第二行。
其實，在Html的各種Element中，的確有既是inline，又能夠設定寬度的情況存在。例如button對象，就可以很好的在文字中間出現，並且設定寬度。
能不能讓span象button那樣顯示呢？通過css2標准中display的定義和inline對象的解釋，發現css2標准的制定者把所有的Element在是否屬於inline上做了非此即彼的規定，要么是inline，要么是block，沒有制定button那樣既是inline，又可以象block那樣設置寬度的屬性值。
在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以后都沒問題。
3.完美之法
|
span{ background-color:#ccc; display:-moz-inline-box; display:inline-block; width:150px; } |