如何防止浮动的div元素在浏览器重新resize时打包？

当浏览器被重新resize时，如何让DIV的左边相邻的浮动不被换行，使得视口变小？

div { float: left; } 

例如，当浏览器被完全最大化时， div就像这样排队：

 |div| |div| |div| |div| |div| |div| |div| |div| 

但是，当浏览器重新resize这种情况发生：

 |div| |div| |div| |div| |div| |div| |div| |div| 

当浏览器重新变小时，如何让div不能换行？

Answer 1

把它们包裹在另一个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; } 

它也有助于在包含div上自动指定溢出：允许其高度匹配子浮点数。

Answer 2

我对比赛已经很晚了，但是这里是我发现的作品：

假设您的导航结构为：

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

为了让它显示链接内联，没有包装，你可以简单地使用：

 nav ul { white-space: nowrap; } nav ul li { display: table-cell; } 

没有固定的宽度或任何要求。

小提琴： http : //jsfiddle.net/gdf3prb4/

Answer 3

让容器div围绕它们

 .container { width: 500px; white-space: nowrap; overflow: visible/hidden/scroll - whichever suits you; } 

Answer 4

我意识到讨厌桌子是很时髦的，但它们可以是有用的。
http://jsfiddle.net/td6Uw/
而不是浮动的div，把它们放在一个表中，并包裹大小受限的div表。 TR将防止包装。
另外，我在TD中使用了DIV，使得单元格造型更加简单。 如果你花时间，你可以devise风格，但是我发现它们很难风格化，通常只能使用我的小提琴所采用的DIV-in-TD方法。

Answer 5

其实很简单。 代码示例：

 Element { white-space: nowrap; } 

Answer 6

 .parent{ white-space: nowrap; } .floater{ float: left; display:inline-block; } 

也应该做的伎俩。 没有宽度要求。