一個更好的方式來分隔導航欄項目

Question

我想要平均地分配這些導航欄項目，並且必須有更好的方法來做到這一點，然後只是給所有的李項目一個寬度，並希望他們沒有溢出。

HTML

<header> 
     <div id="page_wrapper"> 
     <nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Music</a></li> 
     <li><a href="#">Education</a></li> 
     <li><a href="#">Fun</a></li> 
     <li><a href="#">Entertainment</a></li> 
     <li><a href="#">Utilities</a></li> 
    </ul> 
    </nav> 
    </header> 

CSS

header { 
    background-color: #ccc; 
} 

nav { 
    height: 48px; 
} 

nav ul { 
    margin-left: auto; 
    margin-right: auto; 
} 

nav li { 
    display: inline-block; 
    height: 100%; 
    width: 10%; 
} 

nav li a { 
    font-family: cursive; 
    color: #ff1e4b; 
    font-size: 16px; 
    text-decoration: none; 
} 

nav li a:hover { 
    color: #dd5771; 
} 

的jsfiddle：

https://jsfiddle.net/rkmkxjm0/

Answer 1

是的，實際上是。您可以添加每個列表項目之間的填充差異，而不是添加固定寬度。

這裏是你可以用CSS規則做一個例子：

nav li { 
    display: inline-block; 
    height: 100%; 
    padding: 10px; 
} 

您可以檢查JS小提琴這裏的更新版本：https://jsfiddle.net/NikolaosG/rkmkxjm0/1/

附：您的原版jsfiddle與<div id="page_wrapper">存在問題。 div標籤末尾沒有關閉（在</header>之前）

Answer 2

怎麼樣？

把display: flex;放在您的<ul>上。將justify-content: space-between;添加到它，所有的孩子會自動展開佔據其父母的全部寬度。注意，當您更改屏幕尺寸時，它們會適應適合的尺寸。

（我還設置你的頁面的寬度width: 100%; max-width: 1024px;，所以，這將是1024px時，它也可以，但只會佔用100％在小屏幕上。）

如果你想在一些空間開始和結束，只需將justify-content: space-between;更改爲justify-content: space-around;即可。

#page_wrapper { 
 
    width: 100%; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
} 
 

 
body { 
 
    margin-bottom: 60px; 
 
} 
 

 
header { 
 
    background-color: #ccc; 
 
} 
 

 
nav { 
 
    height: 48px; 
 
} 
 

 
nav ul { 
 
    padding: 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    list-style-type: none; 
 
} 
 
nav li a { 
 
    font-family: cursive; 
 
    color: #ff1e4b; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    
 
} 
 

 
nav li a:hover { 
 
    color: #dd5771; 
 
}

<header> 
 
     <div id="page_wrapper"> 
 
\t \t <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Music</a></li> 
 
     <li><a href="#">Education</a></li> 
 
     <li><a href="#">Fun</a></li> 
 
     <li><a href="#">Entertainment</a></li> 
 
     <li><a href="#">Utilities</a></li> 
 
    </ul> 
 
    </nav> 
 
    </header>

Answer 3

如果你不很在乎向後兼容性，你應該考慮Flexbox的佈局，這是支持最先進的瀏覽器，包括火狐，Chrome，Safari瀏覽器，EDGE和，在一定程度上，IE11。 （見CanIUse.com/flexbox）

帶有flexbox的佈局很簡單;只要刪除現有的CSS規則，你ul和li以及與此去：

nav ul { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-around;  
} 

nav li { 
    margin: 0; 
    padding: 0; 
    display: block; 
} 

有一個整體多種其他佈局，你可以做很容易使用Flexbox的的;你可以在這裏看到所有的選項，舉例：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

如果你可以使用外部libraries- Bootstrap有navbar-justified類只是爲你所做