CSS white-space nowrap无法正常工作

时间:2014-01-16 14:46:48

标签: html css css3 overflow whitespace

我有一个带有几个子div的div,它们向左浮动。我不希望它们中断,所以我将它们设置为display:inline-blockwhite-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

3 个答案:

答案 0 :(得分:9)

我可能无法完全理解您的问题,但如果您从float: left;删除.b并将overflow:auto;添加到.a

答案 1 :(得分:2)

不确定你的意思,但如果你停止淹没你的b,并给你一个溢出:自动它应该工作

见:/jsfiddle.net/88yjz/3 /

答案 2 :(得分:0)

这会给你你想要的吗?添加了溢出滚动。

* {
    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;
}