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/