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标记的高度。您的区块高度已由内容font-size和padding确定（加上边距/边框，如果有的话）

Answer 2

如果是ul标签，请不要使用高度属性。因为它会造成不必要的空白。

ul {
   padding: 0;
   margin: 0;
   overflow: auto;
}

这是ul标签的最小但足够的样式

我的顶栏并没有完全填满

2 个答案: