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

标签: jquery html-lists


【解决方案1】:

好的,

html 对示例代码的小修正

<ul id='fluid_ul'>
    <li><img src=".." /></li>
    <li><img src="..." /></li>
</ul>

jquery

$(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
});

【讨论】:

  • 是的,抱歉在我的示例中对 IMG 很懒惰。 jquery 可以工作,但将宽度应用于子级而不是父级:我更新为 $(window).load(function(){ // 一旦页面加载(包括图像) var totalWidth = 0; // 要保存的变量li 元素的总宽度 $('.fluid_ul').children().each(function(){ // 对于每个 li totalWidth += $(this).outerWidth(); // 将其宽度添加到总宽度中}) $('.fluid_ul').css({width:totalWidth}); // 最后将total应用到ul元素});我认为这非常有效!非常感谢!!
  • @tjh,绝对正确.. 抱歉错误.. 使用 .end() 更新 asnwer
猜你喜欢
相关资源
最近更新 更多
热门标签