水平滚动列表宽度调整为新项目

Question

我有一个水平滚动项列表。 但是我无法让ul列表自动调整为包括的项目数。 也就是说，当我用新项目更新列表时，我希望ul的宽度增加。

我有：

products ul { position: relative; width: auto; overflow-x: scroll; white-space: nowrap; margin: 0; padding: 0; }

但仅当我定义宽度时才有效：10000px ...

请帮忙！ 我怎样才能做到这一点？

谢谢

Answer 1

给ul显示：inline-block，宽度将调整为内容。 元素之间可能有一些空格，如果将font-size设置为0并将真实的font-size设置为内部元素（li元素），则可以将这些空间减小为0。 发生这种情况是因为display inline-block在em中设置的元素之间有一些空间，所以它们采用font-size，因此将font-size设置为0不会有多余的空间

更新：我想你想要实现的是： http : //jsfiddle.net/carloscalla/xarjkqbo/2/

看着那（这

display: inline-block;

这将设置内容的宽度，并且li元素具有此宽度，然后ul以及它的长短取决于子元素。

尝试取出一些li元素，只给它们两个，因为ul的宽度取决于它的内容，所以您不会滚动。 请注意，没有设置宽度，这完全取决于内容。

红色边框告诉您ul的宽度，请注意这会随内容而变化。

Answer 2

它似乎不起作用。

我的css：.category {评论：我已经清理干净了，所以目前还没有任何东西} .products ul {display：inline-block; 宽度：自动； 溢出-x：滚动; 空白：nowrap; 边距：0; 填充：0; } .product {width：1200px; 右边距：100px; }

我的HTML

<div class="category">
<ul class="products">
<li class="product">product 1</li>
<li class="product">product 2</li>
etc
</ul>
</div>

宽度：自动工作吗？ 还是需要指定？ 我可能缺少的任何东西，或者在此之前可能要覆盖的所有东西？ 例如，我在其他另一个div中有类别div ...