如何控制内联块div元素之间的间隙，以便可以允许间隙夹在视口后面？

Question

例如，如果我们使用display: inline-block和margin-right: 20px来设置两个div元素的样式，那么第二个div元素会在窗口框架调整大小时过早跳转到下一行打到它的右边缘。

有没有一种简单的方法来解决这个问题？

Answer 1

问题不是很清楚，但如果Eric的答案没有告诉你你需要知道什么，那么这可能是你的问题：

当您将元素设置为内联块时，源中它们之间的任何空格（包括换行符）都会影响间距。在你意识到发生的事情之前，这是微妙而令人沮丧的。

您有两种可能的解决方案。

1）将所有内容放在一行中，源代码中没有间距。这通常不太理想，因为它的可读性要低得多。

2）使用HTML注释使浏览器忽略它们之间的空格。它不是理想的，因为你必须改变HTML，而不是使用一些CSS技巧，但它可以工作。

例如，如果您将li元素设为inline-block，则可以执行以下操作：

<ul>
    <li>Item 1</li><!--
 --><li>Item 2</li><!--
 --><li>Item 3</li>
</ul>

Answer 2

将margin-right: -20px添加到容器