blocks|key|2780455|text|li的宽度是在简单滚动css文件中设置的，因此，如果您希望使用不同的大小，只需删除width属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2780456|以前：.simply-scroll+.simply-scroll-list+li+{+++++++++++++float:+left;+++++++++++++/*width:+290px;*/+width:+290px;+++++++++++++/*height:+200px;*/+height:+180px;+++++++++}|offset|length|style|CODE|2780457|后：.simply-scroll+.simply-scroll-list+li+{+++++++++++++float:+left;+++++++++++++/*height:+200px;*/+height:+180px;+++++++++}|2780458|entityMap^0|0|3|4K|0|2|3C|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

The width of the li is set in the simply-scroll css file, so if you wish to use varying sizes you can simply remove the width property:

Before: 
<code>.simply-scroll .simply-scroll-list li {
 float: left;
 /*width: 290px;*/ width: 290px;
 /*height: 200px;*/ height: 180px;
 }</code>

After: 
<code>.simply-scroll .simply-scroll-list li {
 float: left;
 /*height: 200px;*/ height: 180px;
 }</code>

blocks|key|2420944|text|这是一个常见的问题，版本2(很快就出来了！)通过自动包装您要滚动的元素来修复。现在用手来做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2420945|如果有以下不等宽/高元素列表|2420946|<ul+id="scroller">+++++<li></li>+++++<li></li>+++++etc...+</ul>|offset|length|style|CODE|2420947|把它包装在另一个div中，所以你只需滚动一个。|2420948|<div+id="scroller"><ul>+++++<li></li>+++++<li></li>+++++etc...+</ul>+</div>|2420949|entityMap^0|0|0|0|1R|0|0|0|23|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@$F|S|G|T|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@$F|W|G|X|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|O|$]]

This is a common problem that version 2 (coming out very soon!) fixes by automatically wrapping the element you are trying to scroll. For now do it manually.

If you had this list of unequal width/height elements

<code>&lt;ul id="scroller"&gt;
 &lt;li&gt;&lt;/li&gt;
 &lt;li&gt;&lt;/li&gt;
 etc...
&lt;/ul&gt;</code>

wrap it in another div so you just scroll one.

<code>&lt;div id="scroller"&gt;&lt;ul&gt;
 &lt;li&gt;&lt;/li&gt;
 &lt;li&gt;&lt;/li&gt;
 etc...
&lt;/ul&gt;
&lt;/div&gt;</code>

blocks|key|2780539|text|我把已经提供的两个答案结合在一起来完成这个任务；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2780540|将<ul>包装到自己的<div+id="scroller">中|unordered-list-item|offset|length|style|CODE|2780541|从CSS中的width元素中删除固定的.simply-scroll+.simply-scroll-list+li属性。|2780542|根据需要将padding添加到此元素。|2780543|在Firefox，Chrome和IE中工作。|2780544|entityMap^0|0|1|4|B|J|0|6|5|J|11|0|5|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@$E|S|F|T|G|H]|$E|U|F|V|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|W|8|@$E|X|F|Y|G|H]|$E|Z|F|10|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|11|8|@$E|12|F|13|G|H]]|9|@]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$]]

I got this to work by combining both of the answers already provided;

<ul>
<li>Wrap the <code>&lt;ul&gt;</code> into its own <code>&lt;div id="scroller"&gt;</code></li>
<li>Remove the fixed <code>width</code> property from the <code>.simply-scroll .simply-scroll-list li</code> element in the CSS</li>
<li>Add <code>padding</code> to this element as required.</li>
</ul>

Working in Firefox, Chrome and IE.

blocks|key|2780551|text|我不知道它是否对你有帮助。问题已经写了两年多了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2780552|它是对每幅图像的不同宽度的解决方案。|2780553|$(+window+).load(function()+{
++$('#scroller+li+img').each(function(){
++++++var+widthThis+=+$(this).width();

++++++$(this).parent().css({
++++++++width+:+widthThis
++++++})
+++});
$("#scroller").simplyScroll({
++++pauseOnHover:+false
});|code-block|syntax|javascript|2780554|})；|2780555|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I dont know if it helps for you. Its over 2 years since question were written.

It is solution for different widths of each image inside li 

<pre><code>$( window ).load(function() {
 $('#scroller li img').each(function(){
 var widthThis = $(this).width();

 $(this).parent().css({
 width : widthThis
 })
 });
$("#scroller").simplyScroll({
 pauseOnHover: false
});
</code></pre>

});

I'm using <a href="http://logicbox.net/jquery/simplyscroll/horizontal.html" rel="nofollow noreferrer">simplyScroll v1</a> to horizontally scroll images of varying width but the list items containing the images are of a fixed width.

You can view the scrolling content <a href="http://www.creenanstud.com/" rel="nofollow noreferrer">here</a>.

How do I achieve list items with varying width?

The author suggests the following:

<blockquote>
 If you do want to scroll unequal size
 elements try putting them in a
 container div, then initialising
 simplyScroll on that (note that this
 hack will essentially double the
 amount of elements scrolled!)
</blockquote>

The list already appears to be within a container div:

<pre><code>div.simply-scroll-container
</code></pre>

What does the author mean by "initializing" on the container div?

A similar thread exists <a href="https://stackoverflow.com/questions/4489737/jquery-slider-with-variable-width-elements">here</a> though it is ambiguous to me. Any help is greatly appreciated.

How do I implement image elements of unequal width in simplyScroll?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用水平滚动不同宽度的图像，但是包含图像的列表项是固定宽度的。您可以查看滚动内容。如何实现不同宽度的列表项？作者建议如下：如果您确实希望滚动不等大小的元素，请尝试将它们放入容器div中，然后对其初始化simplyScroll (请注意，此攻击实际上将使滚动的元素数量翻一番！)该列表似乎已经位于一个容器div中：div.simply-scroll-container作者所说的容器div上的“初始化

问如何在simplyScroll中实现宽度不等的图像元素？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在simplyScroll中实现宽度不等的图像元素？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在simplyScroll中实现宽度不等的图像元素？
EN