阻止導航子菜單（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）的行爲像他們漂浮？

回答

相關問題