[英]CSS white-space nowrap not working
I have a div with several child divs which are floating left.我有一个 div,其中有几个子 div,它们向左浮动。 I don't want them to break, so I set them to
display:inline-block
and white-space:nowrap
.我不希望它们损坏,所以我将它们设置为
display:inline-block
和white-space:nowrap
。 Unfortunately nothing happens at all.不幸的是,什么也没有发生。 They just keep breaking.
他们只是不断地打破。
At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible
最后我想在 x 方向滚动,但是当我添加
overflow-x:scroll; overflow-y:visible
overflow-x:scroll; overflow-y:visible
it scrolls in y-direction. 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>
You can see my complete implementation on JSFiddle你可以在 JSFiddle 上看到我的完整实现
I may not fully understand your question but it seems like the divs/scroll behave if you remove: float: left;
我可能不完全理解你的问题,但如果你删除:
float: left;
from .b
and add: overflow:auto;
从
.b
并添加: overflow:auto;
to .a
到
.a
Not sure what you mean, but if you stop floading your b, and give your a overflow:auto it should work不确定你的意思,但如果你停止加载你的 b,并给你一个溢出:自动它应该可以工作
see: /jsfiddle.net/88yjz/3/见:/jsfiddle.net/88yjz/3/
Does this give you what you want?这给你你想要的吗? Added overflow scroll.
添加了溢出滚动。
* {
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;
}
I have a div with several child divs which are floating left.我有一个带有多个子div的div,这些子div向左浮动。 I don't want them to break, so I set them to
display:inline-block
and white-space:nowrap
.我不想破坏它们,所以我将它们设置为
display:inline-block
和white-space:nowrap
。 Unfortunately nothing happens at all.不幸的是,什么也没有发生。 They just keep breaking.
他们只是不断地挣扎。
At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible
最后,我想在x方向上滚动,但是当我添加
overflow-x:scroll; overflow-y:visible
overflow-x:scroll; overflow-y:visible
it scrolls in y-direction. 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>
You can see my complete implementation on JSFiddle您可以在JSFiddle上看到我的完整实现
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.