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

从float移除.box，然后添加display: inline-block;，因为white-space仅适用于内联关卡元素。

Answer 2

使用

test 
test2

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

滚动无效的div的水平列表

3 个答案: