为何将菜单链接包裹在<ul>标签后会出现居中对齐？

这是浏览器默认用户代理样式表在起作用，核心原因是<ul>元素自带的默认内边距影响了布局：

两种布局的差异分析 #

1. 没有

   包裹时：
   你给<li>设置了display: inline，让它变成行内元素。此时<li>直接作为<nav>的子元素，而<nav>是块级元素（默认占满父容器宽度），行内元素会默认在块级元素内左对齐排列，没有额外的偏移。

   • 加入

     包裹后：
     几乎所有现代浏览器都会给<ul>设置默认的padding-inline-start: 40px（也就是左侧内边距40像素）。<ul>作为块级元素占满<nav>宽度，里面的行内<li>元素会从<ul>的左侧内边距开始排列，相当于整体导航链接向右偏移了40px。如果你的导航链接总宽度加上这40px后，刚好接近容器中间位置，视觉上就会呈现“居中”的效果。

验证与调整方法 #

• 你可以用浏览器开发者工具（F12快捷键）选中<ul>元素，在「样式」面板中查看「User Agent Stylesheet」部分，就能看到这个默认的padding-inline-start属性。
• 如果想让导航严格左对齐，直接覆盖<ul>的默认内边距：

  ul {
    padding-left: 0;
  }
  

• 如果想实现真正的居中布局，还可以给<ul>加上文本居中样式：

  ul {
    padding-left: 0;
    text-align: center;
  }
  

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