javascript - 附加不超过一行的交替子图像和文本项

Question

我正在使用 javascript 将一系列子项附加到一个空的根 DOM 元素。

子元素是成对的，一个 16x16 的图像，然后是一些文本。

现在我没有对 css 做任何特别的事情:

空根元素的CSS

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

一对 img 元素的 css

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

一对文本元素的CSS

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

问题在于，如果存在一长串面包屑对，则该行相对于包含它的“面板”换行。

相反，我想要一种设计，其中元素在一行上从左到右并排，但当包含面板的水平宽度用尽时，元素不会换行。问题是有很多对，你可以从第二行的顶部开始像素，看起来真的很糟糕。

我不想尝试根据所涉及的元素来计算行的预期长度，以编程方式限制附加到根元素的内容。也就是说，我希望有一个解决方案，无论附加多少元素，从左到右的元素行都不会换行。

安迪

Answer 1

我想你想要的是:

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