溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下css的span寬度怎么設置生效的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
css設置裝備擺設span寬度失效，讓span設置裝備擺設寬度（width花色）起效布局能耐
span本身不是塊（就像不有骨力一樣）標簽元素，不像div標簽那樣直接配置width寬度就可失效，而span直接配置寬度width花式不會生效起感化。
span告捷設置寬度方法：
1、對span設置裝備擺設float
根據需求對span設置裝備擺設float浮動款式，再設置width寬度便可見效。流毒浮動完成寬度奏效，卻需求同級均緊要應用float浮動格式，不然將涌現同級浮動盒子和與不浮動盒子泛起重疊遮擋氣象。
span設置裝備擺設float實現寬度奏效
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float 完成span寬度</title>
<style>
span{float:left;width:300px; border:1px solid #F00}
</style>
</head>
<body>
<span>我構成塊了 寬度配置300px</span>
span外的內容
</body>
</html>
css span設置float實現得勝設置裝備擺設寬度樣式 實例截圖
2、對span 配置display:block
display:block讓span形成塊元素，變成像DIV異樣默認塊。誤差與DIV異樣獨有一行。
示例完整源代碼（HTML+CSS實例代碼）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:block 完成span寬度</title>
<style>
span{ display:block; width:300px}
</style>
</head>
<body>
<span>我構成塊了 寬度配置300px</span>我要被換行閃現
</body>
</html>
span寬度設置裝備擺設收效實例造詣截圖
3、span寬度設置擴大到span高度矯捷總結
本身默許環境下對span設置裝備擺設寬度、配置高度均是有效的，沒法失效，一般狀況下對span設置裝備擺設float浮動或display:block后，span設置裝備擺設寬度和高度才能正常實現，以是實踐機關時根據需求來選擇完成span寬度與高度法子。
以上就是“css的span寬度怎么設置生效”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
