Html 如何使 DIV 不换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/718891/
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
How to make a DIV not wrap?
提问by Morgan Cheng
I need to create a container DIV style that contains multiple other DIV's. It is asked that these DIV's wouldn't wrap if the browser window is resized to be narrow.
我需要创建一个包含多个其他 DIV 的容器 DIV 样式。如果将浏览器窗口的大小调整为窄，则要求这些 DIV 不会换行。
I tried to make it work like below.
我试图让它像下面一样工作。
<style>
.container
{
min-width: 3000px;
overflow: hidden;
}
.slide
{
float: left;
}
</style>
<div class="container">
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
<div class="slide">something</div>
</div>
This works in most cases. However, in some special cases, the rendering is incorrect. I found the container DIV change to 3000px width in RTL of IE7; and it turns to be messy.
这在大多数情况下都有效。但是，在某些特殊情况下，渲染是不正确的。我发现在 IE7 的 RTL 中容器 DIV 更改为 3000px 宽度；它变得凌乱。
Is there any other way to make a container DIV not to wrap?
有没有其他方法可以使容器 DIV 不包装？
回答by notkwite
Try using white-space: nowrap;in the container style (instead of overflow: hidden;)
尝试white-space: nowrap;在容器样式中使用（而不是overflow: hidden;）
回答by fguillen
If I don't want to define a minimal width because I don't know the amount of elements the only thing that worked to me was:
如果我不想定义最小宽度，因为我不知道元素的数量，那么唯一对我有用的是：
display: inline-block;
white-space: nowrap;
But only in Chrome and Safari :/
但仅在 Chrome 和 Safari 中：/
回答by JSideris
The following worked for me without floating(I modified your example a little for visual effect):
以下对我没有浮动（为了视觉效果我稍微修改了你的例子）：
.container
{
white-space: nowrap; /*Prevents Wrapping*/
width: 300px;
height: 120px;
overflow-x: scroll;
overflow-y: hidden;
}
.slide
{
display: inline-block; /*Display inline and maintain block characteristics.*/
vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
white-space: normal; /*Prevents child elements from inheriting nowrap.*/
width: 100px;
height: 100px;
background-color: red;
margin: 5px;
}<div class="container">
<div class="slide">something something something</div>
<div class="slide">something something something</div>
<div class="slide">something something something</div>
<div class="slide">something something something</div>
</div>The divs may be separated by spaces. If you don't want this, use margin-right: -4px;instead of margin: 5px;for .slide(it's ugly but it's a tricky problem to deal with).
div 可以用空格分隔。如果您不想要这个，请使用formargin-right: -4px;代替（它很丑，但处理起来很棘手）。margin: 5px;.slide
回答by Funkodebat
The combo you need is
你需要的组合是
white-space: nowrap
on the parent and
在父母和
display: inline-block; // or inline
on the children
在孩子们身上
回答by Turako
This worked for me:
这对我有用：
.container {
display: inline-flex;
}
.slide {
float: left;
}<div class="container">
<div class="slide">something1</div>
<div class="slide">something2</div>
<div class="slide">something3</div>
<div class="slide">something4</div>
</div>回答by Yuval Adam
overflow: hiddenshould give you the correct behavior. My guess is that RTLis messed up because you have float: lefton the encapsulated divs.
overflow: hidden应该给你正确的行为。我的猜测是这RTL搞砸了，因为你有float: left封装的divs。
Beside that bug, you got the right behavior.
除了那个错误，你还有正确的行为。
回答by Andres GR
Try to use width: 3000px;for the case of IE.
尝试width: 3000px;用于 IE 的情况。
回答by J-DawG
None of the above worked for me.
以上都不适合我。
In my case, I needed to add the following to the user control I had created:
就我而言，我需要将以下内容添加到我创建的用户控件中：
display:inline-block;
回答by Paka
you can use
您可以使用
display: table;
for your container and therfore avoid the overflow: hidden;. It should do the job if you used it just for warpping purpose.
为您的容器，因此避免overflow: hidden;. 如果您仅将其用于变形目的，它应该可以完成这项工作。
回答by Aistina
The min-widthproperty does not work correctly in Internet Explorer, which is most likely the cause of your problems.
该min-width属性在 Internet Explorer 中无法正常工作，这很可能是导致您出现问题的原因。
Read infoand a brilliant script that fixes many IE CSS problems.
