如何在我的菜单中添加更多链接

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; 
}