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屋!