實現旋轉木馬的問題

Question

我正在嘗試通過自己爲我設計的網頁實現響應旋轉木馬。我有一些問題可能會更容易一些截圖ilustrate thousends倍，所以這裏有雲：

所以你看，我有兩個箭頭切片項目和horizo​​ntall滾動條。

箭頭分別浮動到左側和右側，div.items容器中的項目只是inline-block div，寬度爲90％（並且溢出x：滾動或過程）。

所以現在，如果我追加其他項目的DOM，我結束與此：

爲什麼第四項下面去了？我沒有漂浮物品，並且按照我指定的和水平滾動的方式，我期望它位於後面並且能夠通過滾動條看到它。

我錯過了什麼？

我會貼上相關代碼：

HTML：

<div class="grid"> 
    <div class="left-arrow"></div> 
    <div class="items"> 

    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 

    </div> 
    <div class="right-arrow"></div> 
</div> 

CSS：

div.grid { 
    margin-top: 20px; 
    padding: 10px 75px; 
    text-align: center; 
    z-index: 1000; 
} 

div.grid .left-arrow, div.grid .right-arrow { 
    position: relative; 
    top: 70px; 
} 

div.grid .left-arrow { 
    float: left; 
    width: 0; 
    height: 0; 
    margin: 0 30px 0 -50px; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-right: 35px solid #ddd; 
} 

div.grid .right-arrow { 
    float: right; 
    width: 0; 
    height: 0; 
    margin: 0 -50px 0 30px; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 35px solid #ddd; 
} 

div.items { 
    display: inline-block; 
    z-index: 100; 
    width: 90%; 
    overflow-x: scroll; 
} 

div.item { 
    margin: 10px; 
    display: inline-block; 
    position: relative; 
    left: 0; 
} 

編輯：奧賴利有什麼我很期待實現：

http://shop.oreilly.com/category/browse-subjects/programming.do

Answer 1

集裝箱在高度上增長以容納附加物品。我相信你應該能夠通過在容器元素上設置一個特定的高度來獲得你正在尋找的效果。

編輯：經過測試更多，事實證明設置高度實際上不會有任何影響。您需要設置white-space: nowrap;以使其實際工作。

這裏是爲div.items全CSS（這是所有我改變得到這個在我的測試工作）：

div.items { 
    display: inline-block; 
    z-index: 100; 
    width: 90%; 
    overflow-x: scroll; 
    white-space: nowrap; 
}