导航栏图片导致元素对齐异常：链接无法顶置页面顶部求助

嘿，这个问题我太熟了！你碰到的是inline/inline-block元素默认垂直对齐规则的坑——你的Logo图片作为inline元素，默认会和文本基线对齐，这就把旁边的inline-block链接容器给拽下去了，所以移除图片后，没有了这个基线对齐的影响，链接就能和顶部齐平了。

给你两个简单有效的解决方案，按需选择：

方案1：直接给Logo设置顶部垂直对齐 #

这是最快的修复方式，只需要给.logo的CSS加一行代码：

.logo { 
  max-height: 80px; 
  border-radius: 80px;
  vertical-align: top; /* 新增这行，让图片和父元素顶部对齐 */
}

加上这行后，图片就不会再干扰旁边的链接容器，链接就能和页面顶部完全齐平了。

方案2：改用Flex布局（更推荐长期维护） #

Flex布局是现代前端处理对齐问题的最优解，能彻底规避这类inline元素的对齐困扰，还能让导航栏的布局更灵活：

1. 给导航栏容器.navbar-wrapper添加Flex属性：

.navbar-wrapper {
  display: flex;
  align-items: flex-start; /* 强制子元素顶部对齐 */
}

2. 可以把.link-group-wrapper里的display: inline去掉，因为Flex布局下不需要这个设置：

.link-group-wrapper { 
  margin: 0; 
  padding: 0;
  /* 移除原来的display: inline */
}

这种方法不仅解决了当前的对齐问题，后续如果要做响应式调整（比如移动端折叠导航）也会更方便。

你可以先试试方案1快速验证效果，如果你的项目后续有更多布局需求，方案2会是更好的选择。

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