JQuery Jscrollpane 水平滚动，带内联 HTML 列表

Question

我想要一个带有 html 列表的滚动 Pane ，它只能水平滚动。当我使用下面的代码时，我的列表项在整行后相互清除，并且滚动 Pane 仅垂直滚动。

<div class="scrolling-list">
<ul>
<li> List item 1</li>
<li> List item 2</li>
<li> List item 3</li>
<li> List item 4</li>
<li> List item 5</li>
</ul>    
</div>

JS

<script type="text/javascript">
        $(function()
        {
            $('.scrolling-list').jScrollPane();
        });
</script>

CSS

.scrolling-list{
height:auto;
max-height:200px;
width: 640px;
}
li{
float:left;
width:200px;}

Answer 1

您需要使用内联 block 显示并将 whitespace:nowrap 添加到 CSS，而不是使用 float 。请注意，这可能与某些 IE 浏览器不兼容。

.scrolling-list {
    height:auto;
    max-height:200px;
    width:640px;
    white-space:nowrap;
}
.scrolling-list li {
    display:inline-block;
    width:200px;
}