html - CSS 空白 nowrap 不起作用

Question

我有一个带有几个向左浮动的子 div 的 div。我不希望它们中断，所以我将它们设置为 display:inline-block 和 white-space:nowrap。不幸的是什么都没有发生。它们只是不断破裂。

最后我想在 x 方向滚动，但是当我添加 overflow-x:scroll; overflow-y:visible 它在 y 方向滚动。

.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    display: inline-block;
}
.b {
    float: left;
    width: 50px;
    height: 200px;
    display: inline-block;
}

<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="clearfix"></div>
</div>

可以看到my complete implementation on JSFiddle

Answer 1

我可能不完全理解你的问题，但如果你从 .b 中删除 float: left; 并添加: overflow:auto; 到 .a