css - 如何控制 inline-block div 元素之间的间隙，使得间隙可以被剪辑到视口后面？

Question

例如，如果我们使用display: inline-blockandmargin-right: 20px来设置两个元素的样式div，第二个div元素会过早地跳到下一行。

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

Answer 1

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

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

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

1）在源代码中将所有内容放在一行上，它们之间没有空格。这通常并不理想，因为它的可读性要差得多。

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

例如，如果您将 li 元素设为内联块，您可以这样做：

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

Answer 2

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