Div位置与内嵌块

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的宽度占所需的空间（额外的15像素占体周围的额外空间）：

#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

i set float:left for <li><div> tags。

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