html - 我的顶部栏没有完全填满

Question

我网站上的顶部栏没有完全改变颜色...底部有一条条子。有谁知道为什么？我的website和 error .我的代码:

HTML

<header>
  <ul>
    <li> <a href="/">Home</a></li>
    <li> <a href="https://github.com/reteps" >Github</a></li>
    <li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a></li>
  </ul>
</header>

CSS

header ul { /*selects list of stuff*/
  list-style-type: none; /*no bullet points*/
  margin: 0; 
  padding: 0;
  background-color: #70deef;
  position: fixed;
  width: 100%;
  height: 50px;
}
header li { /*selects list element*/
  float: left; /*move to left*/
}
header li a { 
  display: block; /*makes a square*/
  color: #ffffff; /*white*/
  text-align: center;
  text-decoration: none;
  padding: 20px 20px 10px;
}
header li a:hover {
  background-color: #d6d6d6; /*grey*/

}

Answer 1

删除 ul 标签上的高度。您的 block 高度已经由内容 font-size 和 padding(加上边距/边框，如果有的话)

决定