2

我正在尝试制作一个导航区域，其中包含一个 div 和 4 个 div。

我创建了一个列表，并为这些 div 类设置了 inline-block。

但我不能将它们设置为水平位置。

我想要一个隐藏的滚动条，并使其与 jquery 一起移动，单击该 div 下方的方向按钮。

您可以在此处查看 div 位置的问题：http: //jsfiddle.net/BRtCg/1/

    .divsroll {
    display: inline-block;
    margin:0;
    padding: 0;
    vertical-align: middle;
}
#main {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    overflow: scroll;
    margin: auto;
}

感谢您从现在开始的帮助。

4

2 回答 2

1

我相信这就是你想要达到的目标。

在您的 CSS 中，您需要将您的设置ul li为 inline-block 并使您的宽度ul考虑所需的空间（额外的 15px 占元素周围的额外空间）：

#main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 2015px;
}
#main ul li {
    display: inline-block;
}

我还重组了您的 jQuery 代码，现在滚动功能正常（在 Firefox 中测试）。

HTML 更改：

<input type='button' value='<<' id="back">
<input type='button' value='>>' id="forward">

jQuery：

$(document).ready(function() {
    $('#forward').click(function() {
        var leftPos = $('#main').scrollLeft();
        $("#main").animate({scrollLeft: 505 + leftPos}, 'slow');
    });

   $('#back').click(function() {
        var leftPos = $('#main').scrollLeft();
        $("#main").animate({scrollLeft: leftPos - 505}, 'slow');
    });
});

jsfiddle

于 2013-08-07T13:37:57.687 回答
0

我float:left为<li> <div>标签设置。

这是演示http://jsfiddle.net/BRtCg/14/

于 2013-08-07T13:32:45.840 回答