無法設定寬度的完美解決方案！
在預設的情況下，利用css樣式對span進行寬度設定是無效，但有時為了某種排版的要求，需要對span進行寬度設定，那麼如何在html中利用css樣式設定span的寬度？
思路：這看上去是個很簡單的問題，似乎用style中的width屬性就可以。
然而通過試驗以後發現，無論是在Firefox還是IE中都無效。
在css2的標準中，查閱關於width的定義，我們可以發現，原來css中的width屬性並不總是有效的，如果物件是inline物件，width屬性就會被忽略。Firefox和IE都遵循了這個標準。
1、初步解決span寬度方案
修改span為block型別。在span的css中增加display屬性，將span設定為block型別。
span {
background-color:#fc0;
display:block;
width:150px;
}
這樣寬度就可以實現了，不過這樣做也把前後文字隔在不同行裡面。這樣其實span就完全變成了div。
2、進一步解決span寬度方案
然後我們再增加一個css屬性float，這樣的確在某種條件下能解決問題。
span {
background-color:#fc0;
display:block;
float:left;
width:150px;
}
但如果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寬度方案
下面程式碼的css定義完美解決了span的寬度設定問題。由於瀏覽器通常對不支援的css屬性採取忽略處理的態度，所以最好將display:inline-block行寫在後面，這樣在Firefox裡面，如果到了未來的Firefox 3，這一行就能起作用，程式碼可以同時相容各種版本。
可用於產品庫選項的對齊排版。 eg: http://www.jiangnancopper.com/product/index
<!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:#fc0; display:-moz-inline-box; display:inline-block; width:150px; } </style> </head> <body> <div class="product_left2_5"> <label class="c_input"><input type="checkbox" name="product_type" value="166" onclick="return filter(this);"> <span class="product_left2_4159">UL1007</span></label> <label class="c_input"><input type="checkbox" name="product_type" value="167" onclick="return filter(this);"> <span class="product_left2_4159">UL1015</span></label> <label class="c_input"><input type="checkbox" name="product_type" value="168" onclick="return filter(this);"> <span class="product_left2_4159">UL1032</span></label> <label class="c_input"><input type="checkbox" name="product_type" value="169" onclick="return filter(this);"> <span class="product_left2_4159">UL1061</span></label> <label class="c_input"><input type="checkbox" name="product_type" value="170" onclick="return filter(this);"> <span class="product_left2_4159">UL1185</span></label> <label class="c_input"><input type="checkbox" name="product_type" value="171" onclick="return filter(this);"> <span class="product_left2_4159">UL2464</span></label> <label class="c_input"><input type="checkbox" name="product_type" value="172" onclick="return filter(this);"> <span class="product_left2_4159">UL2468</span></label> </div> </body> </html>