css - 尽管内部 div 宽度大于 100%，但将内部 div 保持在同一行

Question

我正在玩一个幻灯片菜单。我需要内容 div 的宽度为 100%，菜单的宽度为 16%(说来话长)。当然，这会导致内容 div 被推到下一行。有没有一种方法可以使内部 div 保持在同一行，即使总百分比大于 100%，并且内容的右侧部分 div 不在屏幕上？这是 jsfiddle

Answer 1

给一个white-space: nowrap;到 #container 元素，然后覆盖其子元素上的声明:

EXAMPLE HERE

#container {
    overflow: hidden;
    white-space: nowrap;
}

#container > div {
    vertical-align: top;
    white-space: normal;
}

此外，您可能需要使用 vertical-align: top; 将内联 block 元素(在本例中为列)垂直对齐到 #container.

16.6 White space: the 'white-space' property

This property declares how white space inside the element is handled. Values have the following meanings:

nowrap value
This value collapses white space as for 'normal', but suppresses line breaks within text.

还介意the gap between inline block element . HTML 中的制表符和新行算作一个空格。