設(shè)置span 寬度的完美解決方案
我要評(píng)論在html中如何設(shè)定span的寬度？這看上去是個(gè)很簡(jiǎn)單的問(wèn)題，似乎用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>
通過(guò)試驗(yàn)以后發(fā)現(xiàn)，無(wú)效，無(wú)論是在Firefox還是IE中都無(wú)效。
通過(guò)查閱CSS2標(biāo)準(zhǔn)中關(guān)于width的定義發(fā)現(xiàn)，原來(lái)CSS中的width屬性并不總是有效的，如果對(duì)象是inline對(duì)象，width屬性就會(huì)被忽略。Firefox和IE原來(lái)是遵循了標(biāo)準(zhǔn)才這樣做的。
修改span為block類型并設(shè)置float不是完美解決
在span的CSS中增加display屬性，將span設(shè)置為block類型的Element，這樣寬度的確有效了，不過(guò)也把前后文字隔在不同行里面。這樣其實(shí)span就完全變成了div。
span {
background-color:#ffcc00;
display:block;
width:150px;
}
很多人會(huì)建議再增加一個(gè)CSS屬性float，這樣的確在某種條件下能解決問(wèn)題。比如我們的例子中，如果span前面沒(méi)有文字，那的確是可行的。但是如果有了，前后文字就會(huì)連在一起，而span跑到了第二行。
span {
background-color:#ffcc00;
display:block;
float:left;
width:150px;
}
button的情況
其實(shí)，在Html的各種Element中，的確有既是inline，又能夠設(shè)定寬度的情況存在。例如下面代碼就顯示了button對(duì)象，就可以很好的在文字中間出現(xiàn)，并且設(shè)定寬度。
<body>
fixed <button style="width:150px;">width</button> button
</body>
能不能讓span象button那樣顯示呢？通過(guò)CSS2標(biāo)準(zhǔn)中display的定義和inline對(duì)象的解釋，發(fā)現(xiàn)CSS2標(biāo)準(zhǔn)的制定者把所有的Element在是否屬于inline上做了非此即彼的規(guī)定，要么是inline，要么是block，沒(méi)有制定button那樣既是inline，又可以象block那樣設(shè)置寬度的屬性值。
更新的標(biāo)準(zhǔn)CSS 2.1
再看更新的標(biāo)準(zhǔn)，在CSS2.1標(biāo)準(zhǔn)草案中display的定義中增加了一個(gè)叫inline-block的屬性值，針對(duì)的恰好是我們面對(duì)的這種情形。那么再看看各種瀏覽器的對(duì)應(yīng)情況。
Firefox
通過(guò)display的文檔了解到，inline-block在未來(lái)的Firefox 3中會(huì)實(shí)現(xiàn)。通過(guò)Mozllia擴(kuò)展屬性參考了解到，在Firefox 3以前的版本，例如現(xiàn)在的Firefox 2中，可以用-moz-inline-box達(dá)到同樣的效果。
IE
通過(guò)MSDN中的display文檔了解到，inline-block已經(jīng)實(shí)現(xiàn)。實(shí)際測(cè)試發(fā)現(xiàn)IE 6.0以后都沒(méi)問(wèn)題。
完美的解決方案
下面代碼的CSS定義完美解決了span的寬度設(shè)置問(wèn)題。由于瀏覽器通常對(duì)不支持的CSS屬性采取忽略處理的態(tài)度，所以最好將display:inline -block行寫在后面，這樣在Firefox里面，如果到了未來(lái)的Firefox 3，這一行就能起作用，代碼可以同時(shí)兼容各種版本。
<!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>
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開(kāi)發(fā)中，CSS（層疊樣式表）不僅是用來(lái)控制網(wǎng)頁(yè)的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級(jí),本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見(jiàn)使用場(chǎng)景、常見(jiàn)問(wèn)題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語(yǔ)法、常見(jiàn)使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過(guò)鼠標(biāo)懸浮顯示提示文字效果,通過(guò)設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過(guò)對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過(guò)數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
