CSS空格nowrap无法正常工作 [英] CSS white-space nowrap not working

问题描述

我有一个div，其中有几个子div，这些子div向左浮动.我不想破坏它们，所以我将它们设置为display:inline-block和white-space:nowrap.不幸的是，什么也没有发生.他们只是不断地挣扎.

I have a div with several child divs which are floating left. I don't want them to break, so I set them to display:inline-block and white-space:nowrap. Unfortunately nothing happens at all. They just keep breaking.

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

At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible it scrolls in y-direction.

.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上的完整实现

推荐答案

如果您从.b中删除float: left;并添加:overflow:auto;到.a

I may not fully understand your question but it seems like the divs/scroll behave if you remove: float: left; from .b and add: overflow:auto; to .a

这篇关于CSS空格nowrap无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！