全寬水平導航

我目前有一個僞全寬水平導航，通過在每個導致導航擴展爲幾乎全角的列表元素上設置邊距來創建。問題在於，如果導航中的任何內容發生變化，它將會中斷，我將不得不找出新的確切邊距以使其擴展爲全寬度。另外，不同的瀏覽器會稍微改變我的文本和其他內容的大小，這意味着在另一個瀏覽器中，一個瀏覽器中的全角太大（並且會打斷另一條線）。全寬水平導航

所以我想找出一個更好的解決方案。我有一個爲頂級導航項，其中包括改變下面的CSS有效的解決方案：

ul.menu { 
    list-style-type: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: table; 
} 

ul.menu > li:first-child { 
    padding-left: 0; 
} 

ul.menu > li:last-child { 
    padding-right: 0; 
} 

ul.menu li { 
    padding: 12px; 
    display: table-cell; 
    text-align: center; 
} 

ul.menu li a { 
    padding: 12px 0; 
    margin: auto; 
}

結果看起來是這樣的：

Top-level navigation

這似乎是完美的工作，但不幸的是（和可預測），它攪亂了子菜單，現在這個樣子：

Sub-menu navigation

我一直在玩弄子菜單的CSS試圖讓它像過去一樣工作，但一直不成功。

有沒有人知道我需要在這裏做什麼更改，以獲得頂級元素的全寬度導航工作，而離開原來的子菜單？

來源

2013-04-30 Jordan

我試圖調整你的活的CSS到你張貼的「CSS變化」，但我沒有得到子菜單打破。在這一點上，我不得不問，如果你能創造一個小提琴？我沒有看到問題出現在哪裏。謝謝！ – jmbertucci 2013-04-30 03:54:48

嗨喬丹，我在本地保存了網站，然後添加了你的額外的CSS規則，但我不相同。你能用新的主要導航風格創建一個小提琴嗎？我可以幫助解決問題。 – jmbertucci 2013-05-01 02:05:29

這裏是回答descibes [全寬度響應水平頁面導航]的鏈接（http://stackoverflow.com/questions/24414642/responsive-horizontal-page-sliding-navigation/24465646#24465646） – 2014-07-08 13:20:47

我想我理解你，但讓我看看我能否幫助你在那裏（或者至少更接近）解釋。

得到「全寬」你要確保你的容器元素有：

position:relative或position:absolute

您當前的CSS有

.container { 
    position: relative; 
    /* ... */

那就好。這意味着我們可以將子元素定位在此框中，這樣我們就可以獲得「全角」。

現在我們要確保沒有更低的子元素取代此規則。 有一個！我們要刪除該位：

ul.menu li { 
    position: relative; /* remove */ 
    /* ... */

這將導致子菜單包含父li這會導致一些問題，當我們試圖讓它填寫完整的菜單欄的寬度內。

接下來是調整子菜單。這種選擇：

ul.menu li ul.sub-menu{ /*... */ }

我們想要的子菜單是全寬，所以我們增加：

width:100%;

現在，我們已經有了min-width:100%，但我更喜歡堅持width，特別是如果我們知道我們要去做100%。也許這是我的舊IE6骨頭令我癢，但也許有一個原因。它應該在現代瀏覽器中工作，而不需要添加width:100%。所以採取一點鹽一點點。

接下來，我們要通過添加定位子菜單：

left:0; 
top:4.5em;

這應該放置子菜單的全部寬度橫跨主菜單的寬度，砸下來剛好在主-菜單。根據您的設計需要，可能需要一些輕微的推特。

從那裏，我們想平坦的子菜單項，以便他們水平。要做到這一點，我們需要刪除：

ul.menu li ul.sub-menu li { 
    width: 100%; /* remove */ 
    /* ... */

和

ul.menu li ul.sub-menu li a{ 
    /* ... */ 
    display:block; /* remove */ 
    /* ... */

否則，子菜單項將只填滿了整個空間，我們會回來的垂直設計。

我想這就是我所做的全部水平子菜單欄。我希望這就是你要找的。看起來你的垂直子菜單很好。

但是，我會跨瀏覽器測試這個解決方案。我只在Chrome的開發者工具中修改過。

（我希望我沒有錯過任何我的開發人員工具的編輯）

這可能不會讓你一路有，但我希望它能幫助！

乾杯！

ps。我注意到兩個問題。項目數量有限的子菜單傾向於感到左側被擠壓。包含大量項目的子菜單將包裝。

這可能是好的，或者你可能想考慮一個額外的小菜單的類，分散項目更好一點。

來源

2013-04-30 02:42:39 jmbertucci

感謝您的答覆！不幸的是，那不是我想要的。基本上，我最初有導航菜單，目前在我提供的鏈接上。我現在修改了我在我的問題中列出的CSS代碼的頂級導航菜單，以使其自動擴展爲全角，而不考慮物品的數量等。這似乎是正常工作但是，所做的更改已打破子菜單。我想要頂層菜單導航來使用這個更新的CSS，同時保持菜單菜單與原來的完全相同。 – Jordan 2013-04-30 03:12:21

我明白了。這是一個瀏覽器問題，因爲它在Chrome中看起來很好。子菜單是垂直堆疊的，不是水平的。你正在測試哪個瀏覽器？抱歉誤解你的問題。 – jmbertucci 2013-04-30 03:20:52

那麼如果你在[rtt.celero.com.au]（http://rtt.celero.com.au）上看它，那麼是的，它看起來很好，因爲這是使用原始的CSS，而不是修改後的CSS，我包含在我的問題中。當您應用修改後的CSS時，頂層導航看起來很完美（如截圖1所示），但會打破子菜單（如屏幕截圖2所示）。我希望有人能夠幫助我修改CSS，以便子菜單看起來和原來一樣。 – Jordan 2013-04-30 03:26:14

更新這一個。希望它能解決你的問題。

ul.menu > li { 
    padding: 12px; 
    display: table-cell; 
    text-align: center; 
}

來源

2013-04-30 05:35:35

全寬水平導航

回答

相關問題