我想创建一个类似于 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;
}