Question

免责声明 - 已阅读多篇related posts但似乎没有解决我的确切问题。

我的滑块面板包含一个无序列表，其中包含不同宽度的<li>个不同数量的元素。每个LI包含一个图像，因此不同大小的原因。 e.g。 5个元素= 2000px，6个元素= 2100px

现在。如果我将滑块设置为固定宽度2500px，则li元素会在滑块中正确显示。

但是，由于li总宽度不同，因此在滑块末端滚动会有不同的空白空间，从而破坏效果。

如果我不指定CSS中UL的宽度，我的LI元素将正常浮动wrap，而不是填充滑块的宽度（因为没有显式宽度）。

所以我想出了：

$('ul#slide-ul li').each(function(){ 
        sliderWidth += $(this).outerWidth(); // LI's have padding
});

返回滑块内容的正确实际宽度。我可以使用此值来设置滑块的宽度，一切正常 - 离线。

在线，在FF，Chrome和IE中，第一次加载页面时，LI的显示就像没有设置宽度一样。然后我刷新页面，一切正常。

我认为这是因为LI内部的图像此时尚未缓存或加载，并且没有预先确定的宽度，因此LI的大小不是true。

是否有更好的方法可以获得具有不同内容的UL宽度，以便在滑块中使用，并防止页面加载/刷新时出现此问题。

对于冗长，难以关注的帖子感到抱歉，但我无法发布实时链接。如果有帮助的话我会做一个小提琴，但不幸的是有很多代码。

谢谢。

修改

这里或多或少是一个JSFiddle。如果没有实时服务器，我很难复制。

Answer 1

查看white-space: nowrap;

Answer 2

在你的JSFiddle中，已经在所有img元素上定义了宽度，你也不能把宽度放在li元素上吗？

如果您想要动态，也许您可以这样做：给图像一个名为'imgClass'的类

$('ul#slide-ul li').each(function(){
    $(this).width($('.imgClass', this).width());

Answer 3

以白色空间答案为基础，因为我认为一种解决方案是强制所有图像显示在一行上（因此获得ul宽度），这可以使用inline-blocks

我没有触及过JS，但需要更改，因为您不再需要计算slide-ul的宽度，可以使用{{1}的宽度}和.carousel-container宽度我懒得进去并修改所有计算以重建滚动条

使用#slide-ul并告诉display: inline-block，会强制whitespace between them not to wrap始终足够宽以包含所有图片，因为

#slide-ul

将<div style="overflow: hidden;" class="scroll-pane ui-widget ui-corner-all">设置为overflow它是裁剪hidden（现在不是ul;）的那个，而且据我所知，宽度与ul相同，所以你有你需要的数字吗？

我认为将图像全部放在一行是问题吗？