显示内联块。如何防止将块推到新线？

Question

代码在屏幕上。只显示：内联块。当在窗口上时，没有空间放置块而不是向下移动到新线。我想在屏幕上以绿色矩形制作。因此，块移动超出窗口（如果没有空格）并显示滚动条以查看此块。

Answer 1

外部div只需要css属性white-space: nowrap;

See the jsfiddle.

Answer 2

如果你想要一个水平滚动条，你必须做两件事：给容器一个明确的宽度，以及属性overflow-x: auto。

使用display: inline-block将导致元素内部的行为像块一样，但将整个容器视为内联，即占用尽可能多的水平空间，直到遇到边缘，然后流动到下一行。

恕我直言，你最好的方法是给容器拿着元素一个明确的高度（足以只包含你的一个子块），然后给它一个明确的宽度100％的容器大小（你可能需要使用）实际像素; 100％仅在正确设置相对定位时才有效。最后，overflow-x：auto，你应该得到你想要的渲染。