導航填充容器的100％

我正在爲我的頁面調整一個響應式導航代碼。我正在尋找讓代碼顯示導航爲全寬並匹配「調用動作」按鈕的寬度。問題是導航按鈕都有不同的文本長度，但我仍然希望它跨越整個div以匹配其他文件，並提供流暢的盒裝設計。我基本上希望它在桌面視圖上看起來像這樣：我也希望它在移動視圖上像這樣堆疊。（移動視圖不需要任何調整，因爲它看起來不錯，我只需要桌面跨越整個寬度的黑色div下面導航填充容器的100％

當我改變寬度爲#nav它總是敲。下面的按鈕

JSFiddle

#nav, #nav ul { 
    display:block; 
    list-style: none; 
    margin-left:1%; 
    padding: 0; 
}

來源

2016-09-12 Zachary

您可以通過給你的#nav一個display: flex;和width: 100%;做到這一點。然後，分配flex-grow: 1;您#nav > li隨着text-align: center;

CSS

#nav { 
    display: flex; 
    width: 100%; 
} 

#nav > li { 
    flex-grow: 1; 
    text-align: center; 
}

JSFiddle

結果

* Note不要忘記在媒體查詢中給#nav一個display: block;，以便它可以在較小的屏幕上垂直堆疊。

來源

2016-09-12 14:48:18

這個選項唯一的壞處似乎是我失去了移動響應。即使我的JQuery。 – Zachary

@Zachary你看到底部的音符了嗎？只要確保你在媒體查詢中將'＃nav'設置回'display：block;'即可。小提琴更新代表這一點。 –

明白了！謝謝。有什麼辦法可以保持按鈕之間的小白色縫隙？ – Zachary

這將是痛苦少用CSS媒體查詢來實現它：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在桌面視圖或移動視圖中顯示兩個不同的元素。爲了實現項目填補100％的寬度它的父，你可以使用table，tr和td輕鬆地實現它

來源

2016-09-12 14:47:38

導航填充容器的100％

回答

相關問題