阻止导航子菜单（UL）的行为像他们漂浮？

我建立了一个导航，我有一个无序列表，由一组较小的无序列表组成。这些元素被赋予了类“subnav”。阻止导航子菜单（UL）的行为像他们漂浮？

在较小的屏幕上查看导航时，导航“折叠”和菜单堆叠在一起。我想让导航保持“完整”，而不会在屏幕更改时更改形状。

这里有一个的jsfiddle：http://jsfiddle.net/Cyc4n/

如果调整窗口内的jsfiddle你可以看到周围的菜单跳舞的大小 - 我该如何保持它仍然完好？

任何方向不胜感激

来源

2012-03-25 Doug Fir

您是否试过'.navigation {min-width：900px;}'？ – Zeta 2012-03-25 13:22:10

我现在已经和似乎已经修复它 - 谢谢。 – 2012-03-25 13:30:41

你可以使用display: table-cell;为.subnav和display: table;他们的父母，.navigation（或他们的父母更好table-row和table后者的母公司，但它已经工作那样; ））
这里是一个小提琴：http://jsfiddle.net/Cyc4n/1/

编辑：在我的例子，我加了table-layout: fixed和标志权的大型填充。如果你想精确控制你的物品，这里就是例子。如果您希望浏览器在管理项目宽度方面尽最大努力，请随时移除这两个项目。

你也可以使用CSS3 Flexible Box Layout但它的支持比CSS2 display: table;差！如果您专门针对“媒体查询”的“移动”（窄屏幕），应该可以：支持媒体查询的浏览器还应支持Flexbox（这是首先采用桌面而非移动设备的响应式设计）。
EDIT2：支持display: table*;是IE8 +。您已经有了IE7的后备 - inline-block;）

来源

2012-03-25 13:31:23 FelipeAls

感谢您提供关于“灵活盒子布局”的答案和信息我也会研究 – 2012-03-25 13:56:00

您可以使用.navigation{min-width:900px;}确保您的导航宽度至少为900px。这将防止浮动行为。请注意，实际金额取决于字体大小，边框/填充/边距值和浏览器特定的边距（如果您没有重置它们）。如果您使用的是相对值（例如em），那么请尝试使用emmin-width:...。

来源

2012-03-25 13:35:18 Zeta

阻止导航子菜单（UL）的行为像他们漂浮？

回答

相关问题