Question

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

我创建了一个列表，并为那些div类设置了内联块。

但我无法将它们设置为水平位置。

我希望有一个隐藏的滚动条，并使其与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设置为内联块，并使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

Answer 2

我为float:left <li>代码设置<div>。

以下是演示http://jsfiddle.net/BRtCg/14/

带有内联块的Div位置

2 个答案: