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;
}

我的测试：