追加交替的子圖像和文本項目不包裹超出一行

Question

我正在使用JavaScript來追加一個子項目序列到一個空的根DOM元素。

子項是成對的，一個16x16的圖像，然後是一些文本。

現在我沒有做什麼特別的CSS：

CSS爲空的根元素

.breadcrumb-cls { 
    text-align : left; 
} 

的CSS

.breadcrumb-cls img { 
    position : relative; 
    top : 3px; 
} 

的CSS對文本元素對img元素

.breadcrumb-cls .breadcrumb-item-cls { 
    font:bold 13px arial,tahoma, helvetica, sans-serif; 
} 

問題是，如果有很長的麪包屑對序列，則該行將相對於包含它的「面板」進行換行。

相反，我需要一種設計，即在一條線上從左到右並排放置物品，但當包含面板的水平寬度用盡時，這些物品不會包裝。問題是，有很多對，你可以從第二行頂部的像素，它看起來非常糟糕。

我不想嘗試根據涉及的項目計算預計的行長度，以編程方式限制附加到根元素的內容。也就是說，我希望有一個解決方案，無論附加多少項目，左邊到右邊的項目都不會換行。

安迪

Answer 1

我想你想要的是：

.breadcrumb-cls { 
    text-align : left; 
    white-space: nowrap; 
}