CSS | div floatを右にして、スクロールバーを親に追加します。

Question

私はその中に5つのdivを持つ親divコンテナを持っています。 親divの幅は960px、高さは320pxです。内側の要素は左に浮動しており、幅は設定されています。

5個のアイテムが960個の幅広の親divに収まるのに十分な幅とスペースがないので、最後に最後のdivをfloatにするのは当然です。

右にスライドさせてスクロールバーを追加して水平にスクロールする方法はありますか？

http://puu.sh/qiBKI/3f1d4c944a.png

Answer 1

あなたは包まれているから要素を防ぐためにwhite-space: nowrapとdisplay: inline-blockを組み合わせることができます。スクロールバーを親に追加してoverflow: scrollを追加します。

.parent { 
 
    overflow: scroll; 
 
    background-color: lightblue; 
 
    white-space: nowrap; 
 
} 
 

 
.some-child { 
 
    width: 200px; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
    <div class="some-child">Some Text</div> 
 
</div>

.parent { 
    width: 100%; 
    overflow: scroll; 
}