html - 带内联 block 的 Div 位置

Question

我正在尝试制作一个导航区域，里面有一个 div 和 4 个 div。

我创建了一个列表，并为那些 div 类设置了内联 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;
}

感谢您的帮助。

Answer 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