使用CSS滾動水平列表

Question

我想創建一個類似於netflix上看到的列表的水平滾動條。這是HTML的基本設置：

這是我將用它來解釋我的努力的圖像：

上設置了是我想要的：scrolling_list有一個設置寬度（我把它設置爲，比如300px）。然後，在這個div裏面我有一個列表滾動器，它將託管多個名爲outer_list的子項。上面的設置顯示了list_scroller的寬度是如何隨子項的數量而擴展的（1000，1300，1600或任何取決於子項的數量）。

不幸的是，我無法弄清楚如何用css做到這一點..現在，除非我指定list_scroller的寬度，否則它的寬度將不會擴展（它將假定第一個子元素的寬度） 。相反，list_scroller假設這個更短的寬度，然後兒童最終水平堆疊。

任何人都可以幫我解決這個問題嗎？這是當前的CSS：

.scrolling_list { 
    overflow:auto; 
    overflow-y:hidden; 
    position:relative; 
    width:360px; 
} 
.list_scroller { 
    position:relative; 
    display:block; 
    overflow-x:auto; 
    overflow-y:hidden; 
    padding:10px; 
    height:360px; 
} 
.list_scroller .outer_list { 
    width:260px; 
    display:inline-block; 
} 

Answer 1

你在正確的軌道上！我認爲不應該設置overflow: auto;和overflow-y: hidden;，而應該將整個溢出設置爲隱藏狀態，並給list_scroller一個更大的寬度。像這樣的東西可能會奏效：

http://jsfiddle.net/mEg7g/1/

祝你好運，我希望這有助於。 ：d

Answer 2

使用white-space:nowrap的容器：http://jsfiddle.net/BQGa7/

Answer 3

另外，不要忘了添加

-webkit-overflow-scrolling: touch; /* I guess iOS 5 only */ 

對於iOS設備的兼容性。