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;
}