如何避免div显示在新行中

Question

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

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

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

谢谢。

Answer 1

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

主要变化：

• 删除了HTML中id=""sidebar"处的多余引号，这打破了要旨
• 移除height: 0px; 来自div#sidebar CSS
• 添加了white-space:nowrap; 到div#sidebar CSS
• 从div.sidebar-item CSS移除了float:left
• 添加white-space: nowrap; display:inline-block; white-space: nowrap; display:inline-block; 到div.sidebar-item CSS

您也可以选择删除text-align:center; 如果您想使文本在左侧，请从div#sidebar CSS中获取。

Answer 2

在样式表中，将display属性与文档上的内联值一起使用

Answer 3

据我所知，唯一的解决方案是为容器设置固定的宽度。 或者在容器中放置宽度固定的元素

Answer 4

您需要设置一个min-width ，该min-width必须足以容纳div。 另外，您在jsfiddle中加了一个引号，这阻止了样式的应用，并且由于某种原因， height属性设置为0 。 我在这里对您的jsfiddle进行了调整，以显示我想像的行为。