如何在我的菜單中添加更多鏈接

Question

我想改進我的css菜單，例如添加新鏈接時存在滯後。如果可能，我想添加8個鏈接。如何避免這種情況？我希望鏈接是正確的。

nav { 
 
    display: inline-block; 
 
    width: 600px; 
 
    float: right; 
 
    text-align: right; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    margin-right: 15px; 
 
} 
 

 
nav a { 
 
    font-size: 15px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover { 
 
    color: #BEBEBE; 
 
} 
 

 
.header { 
 
    background-color: #1A5694; 
 
    width: 810px; 
 
    height: 52px; 
 
    border-radius: 5px 5px 0px 0px; 
 
} 
 

 
.headerconnexion { 
 
    float: right; 
 
    width: 100px; 
 
    margin: 13px 13px 0px 0px; 
 
} 
 

 
.headerconnexion a { 
 
    color: #B3D1FA; 
 
    text-decoration: none; 
 
} 
 

 
.logo { 
 
    width: 10%; 
 
    margin: 13px 0px 0px 20px; 
 
}

<div class="header"> 
 
    <a href="index.php"> 
 
    <img class="logo" src="http://image.noelshack.com/fichiers/2016/08/1456571967-facebook-logo-png-transparent-background.png" /> 
 
    </a> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
     <li><a href="index.php">Link toast</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</div>

Example Here

Answer 1

只是刪除width爲nav

nav { 
    display: inline-block; 
    float: right; 
    text-align: right; 
} 

JSFiddle

Answer 2

如果你想有像Bootstrap，resposive菜單.... 你應該使用百分比（％）和（em）在你的CSS。

和samrt手機和小設備，你應該使用（媒體查詢），如果你想有很好的菜單。 順便說一下，代碼：

nav { 
    display: inline-block; 
    float: right; 
    text-align: right; 
} 
nav ul { 
    padding: 0; 
}