如何對span設置寬度

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

span標籤

span表示行內元素，至關於inline屬性，只會根據元素的寬度自行展開，本身設置寬度，不起做用。

那若是我特別但願將span元素設置爲寬度且不設置元素呢？下面經過幾個方式去實現。

方式一

設置span屬性爲span{display:block};，呈現的效果以下：

可是這樣寫就體現不了span這個標籤的做用了，跟div功效一致，都表示塊級元素。

推薦指數：🌟

方式二

使用float屬性，設置屬性爲span{float:left}，呈現的效果以下：

因爲float會讓這塊內容脫離標準文檔流，因此要設置寬度，這剛好與個人需求吻合。可是記得最後清除浮動。

因爲寫的代碼量較多，推薦指數：🌟🌟🌟🌟

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

方式三

使用position屬性，設置爲position:absolute/fixed，呈現效果同方式二。

position:absolute/fixed均是將這塊內容脫離文檔流，跟float相似。

因爲會將內容脫離文檔流，其實不是特別好用，推薦指數：🌟🌟🌟

提示：不瞭解position屬性的同窗，請自行百度

方式四

使用display:inline-block的方式，呈現效果同方式二。

display經常使用的有3個屬性，inline爲行內元素，與span相似。block爲塊級元素，與div相似。inline-block結合這二者，能夠本身設置寬度，且不獨佔一行。

代碼量少，推薦指數：🌟🌟🌟🌟🌟

提示：不瞭解display屬性的同窗，請自行百度

方式五

使用flex的方式，呈現效果同方式二。

flex佈局有點相似於inline-block的意思。

對於常年使用flex佈局的人來講，推薦指數:🌟🌟🌟🌟🌟