CSSによる水平リストのスクロール

Question

netflixで見られるような水平スクロールを作成したいと思います。

上位セット・アップ：これは私が私の努力を説明するために使用するイメージがある

：これは、HTMLの基本的なセットアップです私が欲しいものです：scrolling_listは設定された幅を持っています（私はそれを例えば300pxに設定します）。次に、このdivの中に、outer_listという複数の子をホストするリスト・スクローラーがあります。上の設定では、list_scrollerが子の数（1000,1300,1600など、子の数に応じて）で拡大する幅をどのように持つかを示しています。

残念ながら、私はlist_scrollerの幅を指定しない限り、CSSでこれを行う方法を理解することはできません。その幅は拡大されません（最初の子の幅を仮定します） 。その代わりに、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;を設定するのではなく、全体のオーバーフローをhiddenに設定し、list_scrollerに大きな幅を与えるべきです。このような何かがうまくいくかもしれない：

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

幸運を、私はこのことができます願っています。 ：D

Answer 2

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

Answer 3

また、iOSデバイスとの互換性のために

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

を追加することを忘れないでください。