如何避免div显示在新行上

Question

我有一个显示在同一行的div列表。当页面不够宽以显示同一行上的所有div时，我不希望在下一行显示额外的div。如何避免在新行上显示额外的div？

这是一个jsFiddle：http://jsfiddle.net/YCFZM/

尝试减少页面上的宽度，您会在新行上看到一些div。

感谢。

Answer 1

使用解决方案更新了要点：http://jsfiddle.net/Meligy/YCFZM/16/

主要变化：

• 在id=""sidebar"删除了HTML中的额外引用，这打破了要点
• 从height: 0px; CSS
中删除了div#sidebar
• 将white-space:nowrap;添加到div#sidebar CSS
• 从float:left CSS
中删除了div.sidebar-item
• 将white-space: nowrap; display:inline-block;添加到div.sidebar-item CSS

如果您打算将文字放在左侧，也可以从text-align:center; CSS中删除div#sidebar。

Answer 2

在样式表中，使用带有doc

上的内联值的display属性

Answer 3

据我所知，唯一的解决方案是为容器提供固定的宽度。或者在容器中有一个具有固定宽度的元素

Answer 4

你需要设置一个足够大的min-width来包含div。此外，您的jsfiddle中有一个额外的引号，这会阻止您的样式被应用，并且由于某种原因，height属性设置为0。我已经调整了你的jsfiddle here来显示我认为你的行为。