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>

你可以在JSFiddle上看到我的完整实现

Answer 1

我可能不完全理解您的问题，但如果您删除：从.b float: left;并添加：overflow:auto;到.a，则divs/scroll 似乎会表现

Answer 2

不确定你的意思，但如果你停止加载你的 b，并给你一个溢出：auto，它应该可以工作

请参阅：/jsfiddle.net/88yjz/3/

Answer 3

这能给你你想要的吗？添加了溢出滚动。

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-color: #EEEEEE;
}
.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    overflow:scroll;          /* Added this line*/
    background-color: lightcoral;
    -webkit-box-sizing:border-box;
}
.b {
    width: 50px;
    height: 200px;
    margin-top: 50px;
    margin-left: 15px;
    display: inline-block;
    background-color: lightgreen;
    -webkit-box-sizing:border-box;
}
.clearfix {
    float: none;
    clear: both;
}