html - 滚动不工作的 div 的水平列表

Question

我正在尝试创建一个水平移动的框列表，但在第一行的末尾它会移动到第二行。

.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

从.box中移除float，并添加display: inline-block;，作为white-space仅适用于内联级别元素。