Question

因此，当我加载页面时，我有一个导航栏，但由于某种原因，我的ul之间的填充是不同的，我认为这是因为边框，我的#nav正确居中，但我的ul'不是'真的必须集中在一起。同样在我的悬停时，整个导航都随之而来，我只需要1 li就可以了。

见图片：

html代码：

    body {
      background: url(../images/wallpaper.jpg)no-repeat center center fixed;
      background-size: cover;
      padding: 0;
      margin: 0;
    }

    /*De navigatie bar*/

    #nav {
      width: 80%;
      height: 50px;
      margin-left: auto;
      margin-right: auto;

    }

    #nav ul {
      margin: 0;
      padding: 0;
      line-height: 45px;
      width: 24%;
      display: inline-block;
      padding: 0;
    }

    #nav ul li {
      list-style: none;
      float: left;
      width: 100%;
      height: 50px;
      text-align: center;
      margin-left: auto;
      margin: 0;
      padding: 0;
      opacity: 0.3;
      background-color: #A7B5BF;
      border-right: 2px solid black;
    }

    #nav ul:first-child li {
      border-left: 2px solid black;
    }

    #nav ul li a {
      text-decoration: none;
      height: 50;
      font-size: 16px;
      font-family: Sans-serif, Verdana;
    }

    #nav ul li:hover {
      opacity: 0.5;
      margin-top: 2px;
    }

    /*einde navigatie bar*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>website</title>
  <link rel="stylesheet" style="text/css" href="css/style.css" />
  <script type="text/javascript" src="javascript/javascript.js"></script>
</head>

<body>
  <div id="nav">

    <ul>
      <li><a href="#">home</a>
      </li>
      <!--<ul>
    	<li></li>
    	<li></li>
    	<li></li>
    	</ul> -->
    </ul>

    <ul>
      <li><a href="#">Contact</a>
      </li>
    </ul>

    <ul>
      <li><a href="#">Galary</a>
      </li>
    </ul>

    <ul>
      <li><a href="#">ToS</a>
      </li>
    </ul>
  </div>

  <div id="container">
  </div>
  <div id="footer">
    <p></p>
  </div>

</body>

</html>

Answer 1

您获得奇怪的悬停行为的原因是此部分：

#nav ul li:hover {
  opacity: 0.5;
  margin-top: 2px;
}

通过向li添加边距，您正在强制ul，这会推动所有内容。您可以通过将上述内容更改为：

来轻松解决此问题

#nav ul li:hover {
  opacity: 0.5;
  position:relative;
  top: 2px;
}

更简单的方法是使用更简单的列表结构：

<div id="nav">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Galary</a></li>
      <li><a href="#">ToS</a></li>
    </ul>
</div>

然后你可以使用display:table-cell规则轻松设置列表项而不必使用浮点数（这可能会很快变得混乱），如下所示：

#nav ul {
  display: table;
  width: 100%;
}

#nav ul li {
  list-style: none;
  display: table-cell;
  width: 25%;
}

有complete JSfiddle here which should give you an idea of how it works。

Answer 2

我试着稍微清理你的代码。你不需要所有那些ul元素......只需要一个就足够了。这里是你的代码片段。希望这对你有所帮助

#nav{
    /*padd en marge mag weg*/
    width: 80%;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}
#nav ul{
    margin: 0;
    padding: 0;
    line-height: 45px;
    width: 100%%;  /* changed this so that the nav bar takes up the entire width specified */
    display: inline-block;
    padding: 0;
}
#nav ul li{
    list-style: none;
    float: left;
    height: 50px;
    width:25%; /* since you have 4 total nav items i divided the total width by 4 */
    box-sizing:border-box; /* add this since you have used border */
    text-align: center;
    margin: 0 auto;
    padding: 0;
    opacity: 0.3;
    background-color: #A7B5BF;
    border-right: 2px solid black;
}
#nav ul li:first-child{
    border-left: 2px solid black; /* re arranged this so that the first child pseudo is given to the li element */
}
#nav ul li a{
    text-decoration: none;
    height: 50;
    font-size: 16px;
    font-family: Sans-serif, Verdana;
}
#nav ul li:hover{
    opacity: 0.5;
    margin-top: 2px;
}
/*einde navigatie bar*/

<div id="nav">
<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Galary</a></li>
    <li><a href="#">ToS</a></li>
</ul>
</div>
<div id="container"></div>
<div id="footer"><p></p></div>

Answer 3

这就是菜单结构的方式。

<div id="nav">
    <ul>
        <li><a href="#">home</a></li>
          <ul>
            <li></li>
            <li></li>
          </ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Galary</a></li>
        <li><a href="#">ToS</a></li>
    </ul>
    </div>

HTML导航栏问题

3 个答案: