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

Question

For example, if we use display: inline-block and margin-right: 20px to style two div elements, the second div element prematurely jumps to the next line when the window frame is resized to hit its right margin.

Is there a simple way to get around this problem?

Answer 1

The question isn't perfectly clear, but if Eric's answer doesn't tell you what you need to know, then this might be your issue:

When you set elements to inline-block, any whitespace between them (including newlines) in the source affects the spacing. It's subtle and very frustrating until you realize that's what's happening.

You have two possible solutions.

1) Put everything on one line with no spacing between them in the source code. This is usually not ideal because it's much less readable.

2) Use HTML comments to cause the browser to ignore the space between them. It's not ideal because you have to change the HTML, rather than use some CSS trick, but it works.

For example, if you were making the li elements inline-block, you would do this:

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

Answer 2

向容器添加margin-right: -20px