設定span固定寬度
如何設定span寬度：1.修改 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;}
如何設定span寬度：2.將 display:inline -block行寫在後面
下面程式碼的 CSS定義完美解決了span的寬度設定問題。由於瀏覽器通常對不支援的CSS屬性採取忽略處理的態度，所以最好將 display:inline -block行寫在後面，這樣在Firefox裡面，如果到了未來的Firefox 3，這一行就能起作用，程式碼可以同時相容各種版本。
例：span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
一、形如<span>ABC</span>獨立行設定SPAN為固定寬度方法如下：
span {width:60px;text-align:center; display:block; }
實際驗證結果：IE6 OK， FIREFOX 3 OK。
一、形如<span>ABC</span>DEF格式行設定SPAN為固定寬度的方法如下：
span {width:60px;text-align:center; display:block;float:left;}
實際驗證結果：IE6 OK， FIREFOX 3 OK。
二、形如ABC<span>DEF</span>GH
span {width:60px;text-align:center; display:inline-block;}
實際驗證結果：IE6 OK， FIREFOX 3 OK。
提示：完美相容就是把display屬性設為inline-block，同時也可相容前兩種情況。
block，inline，inline-block的區別：
display:block;——類似與DIV標籤的寬高邊距等屬性均可定製的元素特性；
display:inline;——類似與<a>、<strong>標籤的寬高等屬性不可定製的元素特性；
display:inline-block;——“全”可定製屬性的元素特性；
最佳通用方法：span {
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:150px;
}