尽管内部div宽度大于100％，但将内部div保持在同一条线上

Question

我正在玩幻灯片菜单。我需要内容div的宽度为100％，菜单的宽度为16％（这是一个很长的故事）。当然，这导致内容div被打到下一行。有没有办法让内部divs保持在同一条线上，即使总的百分比大于100％，内容div的正确部分在屏幕外？这是jsfiddle

Answer 1

向#container元素提供white-space: nowrap;，然后在其子元素上覆盖该声明：

<强> EXAMPLE HERE

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

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

此外，您可能需要使用vertical-align: top;在#container的顶部垂直对齐内联块元素（本例中为列）。

  

<强> 16.6 White space: the 'white-space' property

     

此属性声明如何处理元素内的空白区域。   值具有以下含义：

     

nowrap 值
  此值会折叠空白区域，而不是“正常”，但会抑制文本中的换行符。

还要注意the gap between inline block element。 HTML中的标签和新行计算空格。

Answer 2

除#container中的空格外，您可以使用overflow:hidden和float:left到#menu元素来防止菜单包含大文本时出现问题：

#menu{
    width:16%;
    border: 1px solid blue;
    display:inline-block;
    overflow: hidden;
    float: left;
}

fiddle