我想要幾個相鄰的塊元素,它們占據整個瀏覽器的寬度。使用white-space: nowrap,效果很好,但是在一個元素和另一個元素之間存在幾個像素的隨機空間:body { margin: 0; padding: 0; }#container1 { white-space: nowrap; position: absolute; width: 100%; }#container1 div { display: inline-block; width: 100%; height: 200px; }<div id="container1"> <div style="background: red;"></div> <div style="background: yellow;"></div> <div style="background: green;"></div> <div style="background: blue;"></div></div>這是jsBin演示。沒有填充,沒有邊距,沒有邊框,沒有偏移。
3 回答

慕斯709654
TA貢獻1840條經驗 獲得超5個贊
這是因為inline(-block)元素之間有一個空格字符(一個換行符和一些制表符算作一個空格),可以通過這樣注釋空格來解決此問題:
<div style="background: red;"></div><!--
--><div style="background: yellow;"></div><!--
--><div style="background: green;"></div><!--
--><div style="background: blue;"></div>
在線演示。
實際上,這不是錯誤,而是內聯元素的正常行為。就像將圖像放置在文本行旁邊,或在輸入元素旁邊放置按鈕一樣。
有幾種方法可以刪除inline(-block)元素之間的空間:
最小化HTML
負邊距
注釋掉空白
打破結束標記
將父級的字體大小設置為零,然后為子級重置
浮動內聯項目
使用flexbox
- 3 回答
- 0 關注
- 428 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消