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