這是一期分享 HTML 中 span 標簽，如何設置寬度的問題。

span標簽

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

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

方式一

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

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

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

方式二

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

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

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

提示：不了解 float 屬性的同學，請自行百度

方式三

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。