怎么對(duì)span進(jìn)行寬度設(shè)置？案例分享！

在之前幾次的分享有關(guān)于基礎(chǔ)知識(shí)標(biāo)簽的學(xué)習(xí)和使用時(shí)不少的小伙伴們又提出了讓小編說說有關(guān)于：“怎么對(duì)span進(jìn)行寬度設(shè)置？”這個(gè)問題，那么下面我們就來講解一下吧！ 

span標(biāo)簽

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

那如果我特別希望將 span 元素設(shè)置為寬度且不設(shè)置元素呢？下面通過幾個(gè)方式去實(shí)現(xiàn)。

方式一

設(shè)置 span 屬性為 span{display:block}; ，呈現(xiàn)的效果如下：

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

推薦指數(shù)：:star2:

方式二

使用 float 屬性，設(shè)置屬性為 span{float:left} ，呈現(xiàn)的效果如下：

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

由于寫的代碼量較多，推薦指數(shù)：:star2::star2::star2::star2:

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

方式三

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

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

代碼量少，推薦指數(shù)：:star2::star2::star2::star2::star2:

那么我們?cè)谕ㄟ^文章的閱讀中想必大家對(duì)于“怎么對(duì)span進(jìn)行寬度設(shè)置”這個(gè)問題和標(biāo)簽的使用更有把握了吧！當(dāng)然小編的分享也希望對(duì)大家的學(xué)習(xí)有所幫助，我們也可以在W3Cschool中進(jìn)行全面的知識(shí)學(xué)習(xí)。