将 <li> 宽度添加到父 <ul>答案

【问题标题】：Add <li> widths to parent <ul>将 <li> 宽度添加到父 <ul>
【发布时间】：2023-03-10 19:00:01
【问题描述】：

我想创建一个包含图像的水平滚动画廊。

即

<ul class='fluid_ul'>
<li id='fluid_li'>
<img>
</li>
<li... etc etc
</ul>

img 是百分比高度/自动宽度。 li 也有一个margin-right 用于间距。

因此，当窗口调整大小/加载时，我需要更改 UL 的宽度。

我发现这个previous post 看起来很有希望，但在这种情况下根本无法让它发挥作用。

任何关于如何在图像调整大小时生成 UL 宽度的想法/帮助都会很棒！

【问题讨论】：

如果您使用 ul display: inline-block，这意味着它将更改其宽度以适应其内容，还是我在您的帖子中遗漏了什么？
我假设 class 和 id 应该在示例代码中交换。ul 的单个 id 和 li 的多个类
@Rory - 我有内联块的问题是我希望宽度大于页面宽度，因此您可以滚动图像。当我尝试应用它时，它会达到页面限制，然后将以下
敲到下一行破坏效果。

$(window).load(function(){ // once the page has loaded (including images) var totalWidth = 0; // a variable to hold the total width of the li elements $('#fluid_ul').children().each(function(){ // for each li totalWidth += $(this).outerWidth(); // add its width to the total }).end().css({width:totalWidth}); // finally revert selection to ul and apply total });