html5中如何對(duì)span進(jìn)行寬度設(shè)置

發(fā)布時(shí)間：2022-02-25 14:59:58 來(lái)源：億速云閱讀：171 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)html5中如何對(duì)span進(jìn)行寬度設(shè)置，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

span標(biāo)簽

span 表示行內(nèi)元素，相當(dāng)于 inline 屬性，只會(huì)根據(jù)元素的寬度自行展開(kāi)，自己設(shè)置寬度，不起作用。

方式一

設(shè)置 span 屬性為 span{display:block};

html5中如何對(duì)span進(jìn)行寬度設(shè)置

但是這樣寫(xiě)就體現(xiàn)不了 span 這個(gè)標(biāo)簽的作用了，跟 div 功效一致，都表示塊級(jí)元素。

方式二

使用 float 屬性，設(shè)置屬性為 span{float:left} ：

html5中如何對(duì)span進(jìn)行寬度設(shè)置

由于 float 會(huì)讓這塊內(nèi)容脫離標(biāo)準(zhǔn)文檔流，所以要設(shè)置寬度，這恰好與我的需求吻合。但是記得最后清除緩存。

由于寫(xiě)的代碼量較多

提示：不了解 float 屬性的同學(xué)，請(qǐng)自行百度

方式三

使用 display:inline-block 的方式，呈現(xiàn)效果同方式二。

display 常用的有3個(gè)屬性， inline 為行內(nèi)元素，與 span 類(lèi)似。 block 為塊級(jí)元素，與 div 類(lèi)似。 inline-block 結(jié)合這兩者，可以自己設(shè)置寬度，且不獨(dú)占一行。

關(guān)于“html5中如何對(duì)span進(jìn)行寬度設(shè)置”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡