如何去除nav导航栏左侧空白 实现导航链接与标题对齐

问题原因 #

这块空白不是li元素的padding导致的，是浏览器对<ul>无序列表的默认内置样式：浏览器默认会给ul添加40px左右的左侧内边距，用来放置列表默认的圆点标记。你之前只调整了li的内外边距，没有清除ul本身的默认padding，所以空白一直存在。

注：哪怕你已经给li设置了list-style-type: none隐藏了圆点，浏览器也不会因为你隐藏了列表标记就自动删掉预留位置的内边距，必须手动清除。

具体操作 #

直接在你现有CSS代码里添加下面这段样式即可：

nav ul {
  /* 清除ul默认左侧内边距，和页面标题对齐 */
  padding-left: 0;
  /* 可选：顺手清除ul默认上下外边距，避免导航块上下出现不必要的空隙 */
  margin: 0;
}

不需要修改你已经写好的其他CSS和HTML结构，添加完刷新页面就能看到导航链接和上方标题左侧完全对齐。

内容的提问来源于stack exchange，提问作者Rick 3 dollar