使用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设备的兼容性。