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

我有一个水平滚动的项目列表。但我无法让ul列表自动调整到包含的项目数量。也就是说，我希望ul的宽度随着我用新项目更新列表而增长

我有：

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

但它只有在我定义一个宽度时才起作用，比如宽度：10000px

请帮忙！我该怎么做

---

谢谢

提供ul显示：内联块，宽度将根据内容进行调整。元素之间可能有一些空格，如果将字体大小设置为0并将li元素内的元素的实际字体大小设置为0，则这些空格可以减少为0。之所以会出现这种情况，是因为显示内联块在em中设置的元素之间有一些空格，所以它们采用字体大小，所以您将字体大小设置为0，并且不会有额外的空格

更新：我想你想要达到的是：

看这张照片

display: inline-block;

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

试着拿出一些li元素，只给它两个，你不会有卷轴，因为ul的宽度取决于它的内容。看，没有宽度设置，这一切都取决于内容

---

红色边框告诉您ul的宽度，看，这取决于内容。它似乎不起作用

我的css： .category{comment:我已经清理过了，所以现在什么都没有} .products ul{显示：内联块；宽度：自动；溢出-x:滚动；空白：nowrap；边距：0；填充：0；} .产品{宽度：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中有category div，例如…

如果您需要更具体的帮助，请通过提供html结构提供更多信息。我以前做过水平滚动，我很乐意帮你。它似乎不起作用。我的css：{分类{注释：我已经清理了它，所以它现在什么都没有。}产品ul{显示：内联块；宽度：自动；溢出-x：滚动；空白：nowrap；边距：0；填充：0；}。产品{宽度：1200px；右边距：100px；}我的html产品1产品2等宽度：自动工作吗？或者我需要指定它吗？也许有什么东西在覆盖它？我有一个类别div在另一个div中，例如…看看更新，告诉我这是否是你想要实现的。看一看JSFIDDLE，谢谢！你的小提琴起作用了，我现在明白了！但我应该解释得更详细，对不起。不是像现在那样使用带有overflow-x:scroll的div框，它给了我主滚动条和div滚动条，我需要它来为主滚动条工作。我应该在主体上放置overflow-x:scroll吗？如果我没有说清楚，请道歉。如果这是正确的，请将其标记为您问题的答案。多解释一下，我很乐意帮你。