导航栏下划线致居中异常求助（附HTML/CSS代码）

问题根源 #

默认的text-decoration: underline会在文字基线下方绘制线条，占据额外垂直空间，干扰flex布局中align-items: center的垂直居中计算，导致视觉上元素对齐偏差。

解决方案（两种可选，均不破坏列表结构） #

方法一：用border-bottom替代默认下划线

这种方式能完全控制下划线的样式和位置，不会影响元素的垂直居中计算：

/* 修改导航链接样式 */
nav ul li a{
  text-decoration: none;
  color: #707090;
  font-size: 1em;
  border-bottom: 2px solid #707090; /* 自定义下划线颜色、粗细 */
  padding-bottom: 2px; /* 调整下划线与文字的间距 */
  display: inline-block; /* 确保padding生效 */
}

/* 给激活状态的链接设置高亮下划线 */
nav ul li a.active{
  border-bottom-color: #F58F7C;
}

方法二：调整默认下划线的偏移量

如果偏好使用原生text-decoration，可以通过CSS3的text-underline-offset属性调整下划线位置，避免干扰居中：

nav ul li a{
  text-decoration: underline;
  text-underline-offset: 4px; /* 按需调整下划线与文字的距离 */
  color: #707090;
  font-size: 1em;
}

注：该属性支持所有现代浏览器。

关键布局修正 #

你的代码中navbar的align-items: center被注释掉了，这是垂直居中的核心属性，必须开启；同时移除#name的浮动（flex布局无需浮动）：

.navbar{
  display: flex;
  align-items: center; /* 取消注释，实现垂直居中 */
  justify-content: space-between; /* 保持网站名称左、导航右的布局 */
  font-size: 1.8em;
  padding: 1rem 0; /* 添加上下内边距，优化视觉体验 */
}

#name{
  font-family: "Roboto Slab";
  padding-left: 1rem;
  /* 移除 float: left */
}

以上两种方案都能保留下划线效果，同时让导航栏元素完美垂直居中，且不会破坏列表结构，不影响后续移动端菜单按钮的开发。

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