如何修复HTML导航栏过短、显示项目符号及遮挡内容问题？

问题1：文本上方出现奇怪项目符号 #

你的CSS里list-style-type: none;是游离状态，没有绑定到任何选择器（比如ul或li），导致浏览器默认的列表项目符号没被清除。

修复方法：
把list-style-type: none;放到ul的样式块里，同时清除ul默认的内外边距（浏览器自带样式会给ul加padding-left和margin）：

ul {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none; /* 清除列表符号 */
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
}

问题2：导航栏长度过短 #

浏览器默认给ul添加的padding-left和margin，会让你设置的width:100%失效，导致导航栏实际宽度小于页面宽度。上面的修复已经把margin和padding设为0，能解决这个问题。

另外你重复写了两次li的样式块，可以合并成一个减少冗余：

li {
  float: left;
  border-right: 1px solid #bbb; /* 合并之前的两个li样式 */
}

问题3：导航栏遮挡下方文本 #

ul设置了position: fixed后会脱离正常文档流，不占用页面空间，下方内容会直接跑到它下面被遮挡。

修复方法：
给页面主体（比如body或内容容器）添加padding-top，数值等于导航栏的实际高度（可根据实际情况调整）：

body {
  padding-top: 40px; /* 避免内容被固定导航栏遮挡 */
}

完整修复后的CSS代码 #

ul {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

.active {
  background-color: #04AA6D;
}

body {
  padding-top: 40px; /* 适配固定导航栏的高度 */
}

内容的提问来源于stack exchange，提问作者Dreslinau Wahls