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这样的转发菜单，.... 你应该在你的CSS中使用百分比（％）和（em）。

对于samrt手机和小型设备，如果你想拥有漂亮的菜单，你应该使用（媒体查询）。顺便说一句，对于你的代码：

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

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

2 个答案: