Question

我希望有几个块元素彼此相邻，它们占用整个浏览器宽度。

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

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

Answer 1

这是因为内联（-block）元素之间的空格字符（换行符和几个选项卡计为空格），这可以通过以这种方式注释该空格来修复：

<div style="background: red;"></div><!-- 
 --><div style="background: yellow;"></div><!-- 
 --><div style="background: green;"></div><!-- 
 --><div style="background: blue;"></div>

<强> Online Demo

实际上，它不是一个bug，它是内联元素的正常行为;就像将图像放在一行文本旁边，或者在输入元素旁边放一个按钮一样。

有几种方法可以删除内联（-block）元素之间的空格：

最小化HTML
负边距
评论白色空间
打破结束标记
将父级的字体大小设置为零，然后将其重置为子级
浮动内联项目
使用flexbox

检查Chris Coyier's Article或SO上的这些类似主题：

Answer 2

我曾经遇到过这个问题而且我使用过这个CSS属性。有时它的帮助。

font-size:0;

Answer 3

尝试将所有div分别编成单个。有时空白不能像我们想要的那样工作。

http://jsbin.com/peqevamu/8/

nowrap内联块之间的空间

3 个答案: