Question

我制作了一个导航栏，上面有5个像素，我似乎无法摆脱……我想我需要一双新鲜的眼睛才能看这段代码。此导航栏的理想高度是没有上面的代码块时的高度。当您将鼠标悬停时，更容易看到它。

.nav {
  width: 100%;
  top: 0;
  left: 0;
  padding-top: 0;
  margin-top: 0;
  background-color: #336699;
  overflow hidden;
  position: fixed;
}

.nlist {
list-style-type: none;
padding-left: 0;
}

.nlist a {
  padding-top: 0;
  margin-top: 0;
  display: block;
  float: left;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  background-color: #336699;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: #A0B2CA;
}

.nlist a:hover{
  background-color: #3973ac;
  color: #c6d9ec;
}

body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <title></title>
  </head>
  <body>
  <div class="nav">
    <ul class="nlist">
      <li> <a href="" class="nlink"> Quotes </a> </li>
      <li> <a href="" class="nlink"> Humor </a> </li>
      <li> <a href="" class="nlink"> Literature </a> </li>
      <li> <a href="" class="nlink"> Subcribe </a> </li>
      <li> <a href="" class="nlink"> Test </a> </li>
    </ul>
  </div>
  </body>
</html>

`

导航栏中链接上方显示的额外像素

0 个答案: