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，则可以将此空格减少为0，并将实际字体大小设置为内部元素（li元素）。发生这种情况是因为显示内联块在em中设置的元素之间有一些空间，因此它们采用字体大小，因此您设置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;宽度：自动; overflow-x：scroll;白色空间：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，例如......

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

2 个答案: