Html CSS 空白 nowrap 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21164976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS white-space nowrap not working
提问by Julian F. Weinert
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-blockand white-space:nowrap. Unfortunately nothing happens at all. They just keep breaking.
我有一个 div，其中有几个子 div，它们向左浮动。我不想让它们坏掉，所以我将它们设置为display:inline-block和white-space:nowrap。不幸的是，什么也没有发生。他们只是不断地打破。
At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visibleit scrolls in y-direction.
最后我想在 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>
You can see my complete implementation on JSFiddle
你可以在 JSFiddle 上看到我的完整实现
采纳答案by Craighead
I may not fully understand your question but it seems like the divs/scroll behave if you remove: float: left;from .band add: overflow:auto;to .a
我可能不完全理解你的问题，但如果你 remove: float: left;from.b和 add: overflow:auto;to ，div/scroll 的行为似乎.a
回答by user3004410
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/
回答by Ruskin
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;
}
