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

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;
 }