如何避免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進行了調整，以顯示我想像的行為。