スクロールしていないdivの横のリスト

Question

水平に移動するボックスのリストを作成しようとしていますが、最初の行の最後に2番目の行に移動します。

.container { 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
} 
 
.box { 
 
    max-width: 98%; 
 
    min-width: 150px; 
 
    background-color: #F4D989; 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 1

white-spaceのみインラインレベル要素に働くよう、.boxからfloatを外し、display: inline-block;を追加します。

Answer 2

使用

.container{ 
    white-space:nowrap; 
    display: inline-flex 
    overflow-x:auto; 
} 

Answer 3

あなたのコードは正常に動作します。メインコンテナ以外のdivクラスにボックスを入れます。以下のコードを試してみてください。

以下

.box-wrap { 
 
    white-space: nowrap; 
 
    overflow-x: auto; 
 
} 
 
.box { 
 
    max-width: 98%; 
 
    min-width: 150px; 
 
    background-color: #F4D989; 
 
    float: left; 
 
}

<div class="box-wrap"> 
 
    <div class="box" style="width: 100px;height:100px;background-color: red;"></div> 
 
    <div class="box" style="width: 100px;height:100px;background-color: black;"></div> 
 
    <div class="box" style="width: 100px;height:100px;background-color: red;"></div> 
 
</div>

は、私は各ボックスが別個にするために異なる色を使用し、それがどのように動作するかのスクリーンショットです。
Click to see image