オーバーフロー-xスクロールで1つの行のCSS divs

Question

高さが固定されたリストと、1つの行内にある項目が必要です。項目の幅が幅を超えている場合、アイテムを次の行にプッシュしないようにオーバーフローxスクロールが必要です。これまでのところ私は、UL/Liとフロートのためのインラインブロックの周りプレイしました

は...あなたの助けのための

感謝をdivを放置したが、それらすべてが次の行にプッシュされます！

Answer 1

このお試しください：

.container { 
    overflow: auto; 
    white-space:nowrap; 
    width: 500px; 
} 
.item { 
    padding: 10px; 
    border: 1px solid red; 
    display: inline-block; 
    vertical-align:top; 
    margin-right:20px; 
    white-space:normal; 
} 

は、例の実行：https://jsfiddle.net/3dsign/gw35yq9p/

Answer 2

代わりに表示使用する：インラインブロックとfloatingsを、その方がはるかに簡単フレキシボックスを学習しようとすると、信じられないほどの機能を備えています。Flexbox Tutorial

をあなたが望むなら、これを使ってください：

.container { 
    overflow: auto; 
    display:flex; 
    justify-content:space-around; 
} 
.item { 
    padding: 10px; 
    border: 1px solid red; 
    vertical-align:top; 
    white-space:normal; 
}