css - JScrollPane - 缩略图图像不会水平滚动

Question

我有缩略图图像的无序列表，可以在页面底部水平显示。我希望一些图像可见，而其他图像在使用滚动条时水平滚动进/出。

但是，我无法让我的图像排成一条连续的线 - 它们在 100% 宽度标记处分解。

这可能是我的 css 而不是 jscrollpane 的问题。

演示在这里：http ://www.air.desensdesigns.com/temp.html

CSS：

 #thumbnails{
position:fixed;
top:86%;
left:0px;
height:125px;
width:100%;
background:rgba(0,0,0,.6);
}

#thumbnails ul{
position:relative;
top:5px;
}

#thumbnails li{
list-style:none;
float:left;
margin:5px;
padding:0px;
height:100px;
width:133px;
border:2px solid #333;
}

JS：

$(function() {
    $thumbnails.jScrollPane({});
});

Answer 1

为 ul 添加宽度：

#thumbnails ul {
    position: relative;
    top: 5px;
    width: 5000px;
}

---

更新

试试添加这个：

.jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    background: red;
}

我的测试：