Question

我正在使用jQuery制作一些东西。例如，有时我会在列表中包含一堆图像。这是一个水平列表（因此每个图像都是从左到右显示）。此列表非常大，页面中只显示30个图像中的9个（取决于您的屏幕分辨率）。所以我使用jQuery从左向右滑动（如果你的鼠标在屏幕的左侧，它向左滚动，反之亦然）。

为了使这个工作，我的列表包含在div中。此div使用宽度999999px。因此，图像的宽度可达999999像素，直到显示下一行图像。因为列表会自动将所有内容列为水平，直到下一个图像不再适合页面，然后下一个图像将显示在新行中。所以当我没有使用额外的div时，我得到的是一个3x3'表'。当我在整个事物上放置一个宽度为999999px的div时，列表水平到999999px，然后它会形成一个新行。

我的问题是：有更简单的方法来执行此操作吗？

我可以将宽度设置为：width:infinite;或类似的东西吗？或者我做错了什么？

希望我的平均英语能让自己清楚。提前谢谢！

HTML：

<div id="images">

    <ul id="listimages">  
                    <li><img src="img/set1/1.jpg"/></li>
                    <li><img src="img/set1/2.jpg"/></li>
                    <li><img src="img/set1/3.jpg"/></li>
                    <li><img src="img/set1/4.jpg"/></li>
                    <li><img src="img/set1/5.jpg"/></li>
                    <li><img src="img/set1/6.jpg"/></li>
                    <li><img src="img/set1/7.jpg"/></li>
                    <li><img src="img/set1/8.jpg"/></li>
                    <li><img src="img/set1/9.jpg"/></li>    
                    <li><img src="img/set1/10.jpg"/></li>
                    <li><img src="img/set1/11.jpg"/></li>
                    <li><img src="img/set1/12.jpg"/></li>
    </ul> 
</div>

CSS：

  body {
background: black;
color:white;
}
#images{
float:left;
}
ul#listimages{
width:100%;
list-style-type:none;
overflow: hidden;
}
ul#listimages li {
display: block; 
float: left;
}
 ul#listimages img {
height:200px;
width:400px;
}

Answer 1

这是最简单的方法。

请注意，某些浏览器（阅读：Chrome）在广泛的元素上遇到了麻烦;你应该设置display: none不可见的任何元素。

让列表超出屏幕范围

1 个答案: