小编典典

nowrap内联块之间的空间

html

我想要几个相邻的块元素,它们占据了整个浏览器的宽度。

使用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>

没有填充,没有边距,没有边框,没有偏移。


阅读 309

收藏
2020-05-10

共1个答案

小编典典

那是因为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
2020-05-10