該文講述如何設定 HTML span 寬度。 缺省情況 HTML span 的寬度設定無效

在 HTML 中如何設定 span 的寬度？這看上去是個很簡單的問題，似乎用 style 中的 width 屬性就可以。例如： /p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test Span

span {

background-color:#ffcc00;

width:150px;

}

fixed width span

通過試驗以后發現，無效，無論是在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 的各種Element中，的確有既是inline，又能夠設定寬度的情況存在。例如下面代碼就顯示了button對象，就可以很好的在文字中間出現，并且設定寬度。

fixed width button

能不能讓 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及以上版本都沒問題。 設置 span 寬度的完美解決方案

下面代碼的 CSS定義完美解決了span的寬度設置問題。由于瀏覽器通常對不支持的CSS屬性采取忽略處理的態度，所以最好將 display:inline -block行寫在后面，這樣在Firefox里面，如果到了未來的Firefox 3，這一行就能起作用，代碼可以同時兼容各種版本。 /p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test Span

span {

background-color:#ffcc00;

display:-moz-inline-box;

display:inline-block;

width:150px;

}

fixed width span

該文轉自：http://www.blabla.cn/css_kb/html_span_width_kb.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html中label的寬度無法修改,如何设置HTML span、label 的宽度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。