如何使navbar鏈接填充100％的頁面寬度

這是我的奮鬥。所以我一直想知道如何讓navbar-links填充100％的導航。因此，他們有相等數量的間距，並且如果添加更多鏈接，字體大小將減少 - 這樣它將始終填充100％。如何使navbar鏈接填充100％的頁面寬度

現在，我似乎無法做到這一點。我只帶了一套填充，但我試着做這樣的東西：

display: block; 
float: left; 
width: 100%;

，但它給我都挺不工作在所有影響：S

任何人都能夠幫助我在這呢？

Codepen example

來源

2013-03-11 michaelw90

從＃main-navigation中刪除寬度，並添加到＃main-navigation li中，其值等於100/the_numberof_elements_in_the列表。你的CSS應該是：

#main-navigation { 
    height: 54px; 
    overflow: hidden; 
    border-bottom: 1px solid black; 
} 

#main-navigation ul { 
    height: 54px; 
    overflow: hidden; 
} 

#main-navigation li { 
    font-size: 1.0em; 
    text-transform: uppercase; 
    list-style: none; 
    float: left; 
    width: 20%; 
}

這樣，你有你的資產淨值佔所有可用的寬度，但你的字體大小不會自動調整大小。你應該改變它的元素數量的函數（類似於你對李的寬度所做的操作）。如果您在服務器端動態生成此列表，則可以對css執行相同的操作，然後爲這兩個屬性計算正確的值。如果您使用ajax來填充列表，您可以使用javascript更改屬性。

來源

2013-03-11 13:19:48

謝謝你的答案。這似乎是一個很好的方法，唯一的問題是，我不知道導航中會有多少菜單項，因爲在交付wordpress安裝時，這取決於客戶端。有沒有其他的方式來完成這項工作？另外，我認爲我必須指定一個寬度，以查看我的側邊欄是否處於遮擋狀態。與邊欄和內容相比，下面是整個代碼的代碼片段：http://codepen.io/anon/pen/eDufF – michaelw90 2013-03-11 13:29:14

我不認爲你可以用純粹的css方法做到這一點。如果願意使用CSS3r，也許可以通過計算來實現此結果，但它們對瀏覽器的支持很差。 – 2013-03-11 13:54:42

這是一個使用JQuery的解決方案。您可以將元素添加到列表中，並且所有內容都將相應地調整大小。 http://codepen.io/anon/pen/KvnpA – 2013-03-11 14:20:23

這樣做是用在孩子display: table父和display:table-cell的一種方式。我相信它不適用於某些版本的IE（當然）。 Here's an exaple

來源

2013-03-11 13:10:38 jlasarte

這工作得很好，做什麼我問。感謝您抽出寶貴的時間告訴我:)如果添加比設置寬度可處理更多的列表項，則會出現此解決方案的唯一問題。我相信這是因爲我爲文本設置了字體大小和填充。所以我想我必須使用Javascript來設置一些條件，如掃羅給我看，但也有一些問題，該解決方案以及，嘿.. – michaelw90 2013-03-11 20:13:32

您可以改用nav標記並將其視爲表格。將<ul>標籤視爲表格行，將<li>標籤視爲表格單元格。例如：

nav{ 
display: table; 
text-align: center; 
width: 100% 

} 
nav ul{ 
display: table-row; 
} 

nav ul li { 
display: table-cell; 
}

這將伸展的<li> 100％

我學會了從以下鏈接的內容：http://www.darkstardesign.com/darkstar-blog/2012/11/27/stretching-horizontal-navigation-menus-to-the-full-width-of-a-layout/

來源

2014-09-23 04:28:37 Bharath

如何使navbar鏈接填充100％的頁面寬度

回答

相關問題