Html 当浏览器重新调整大小时，如何防止浮动的 div 元素换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2275129/
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 can I prevent floated div elements from wrapping when the browser is re-sized?
提问by Marcus
How do you make DIV's that are floated left next to each other not wrap when the browser is re-sized such that the viewport becomes smaller?
当浏览器重新调整大小以使视口变小时，如何使彼此相邻浮动的 DIV 不回绕？
div {
float: left;
}
For example when the browser is fully maximized the divs line up like this:
例如，当浏览器完全最大化时，divs 会像这样排列：
|div| |div| |div| |div| |div| |div| |div| |div|
But when the browser re-sized smaller this happens:
但是当浏览器重新调整大小时，会发生这种情况：
|div| |div| |div| |div| |div|
|div| |div| |div|
How can I make the divs not wrap when the browser is re-sized smaller?
div当浏览器重新调整大小时，如何使s 不换行？
采纳答案by AaronSieb
Wrap them in another div, which has a width (or min-width) specified.
将它们包装在另一个指定了宽度（或最小宽度）的 div 中。
<div class="parentContainer">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
.parentContainer {
/* The width of the parent needs to be equal to the total width of the children.
Be sure to include margins/padding/borders in the total. */
width: 600px;
overflow: auto;
}
It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.
在包含的 div 上指定 overflow: auto 也有帮助，以使其高度与子浮点数相匹配。
回答by JacobTheDev
I'm pretty late to the game, but here's what I've found that works:
我玩游戏已经很晚了，但这是我发现有效的方法：
Let's say you have a navigation structured as:
假设您的导航结构如下：
<nav>
<ul>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
</ul>
</nav>
To get it to display the links inline, without ever wrapping, you can simply use:
要使其内联显示链接，而无需换行，您只需使用：
nav ul {
white-space: nowrap;
}
nav ul li {
display: table-cell;
}
No fixed widths or anything required.
不需要固定宽度或任何东西。
Fiddle: http://jsfiddle.net/gdf3prb4/
回答by easwee
Make the container div around them
使容器 div 围绕它们
.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}
回答by dlchambers
I realize that it's fashionable to hate on tables, but they can be useful.
http://jsfiddle.net/td6Uw/
Instead of floating the divs, place them in a table and wrap the table with a size-constrained div. The TR will prevent wrapping.
Also, I used DIVs inside the TDs to make cell styling easier. You could style the TDs if you spend the time, but I find them hard to style and usually wimp out and just use the DIV-in-TD method employed by my fiddle.
我意识到讨厌桌子很时髦，但它们可能很有用。
http://jsfiddle.net/td6Uw/
不是浮动 div，而是将它们放在一个表格中，并用一个大小受限的 div 包裹表格。TR 将防止包装。
此外，我在 TD 中使用了 DIV 使单元格样式更容易。如果你花时间，你可以为 TD 设计风格，但我发现它们很难设计，而且通常会退缩，只是使用我的小提琴采用的 DIV-in-TD 方法。
回答by derpymelon
It is actually really simple. Example of code:
其实很简单。代码示例：
Element {
white-space: nowrap;
}
