如何使用CSS修复导航栏列表项链接间距不均匀的问题

问题根因 #

你当前导航栏链接间距不均由两个问题导致：

• 普通导航链接使用.navbar__links类设置了固定125px宽度，但最后的Sign Up按钮属于.navbar__btn类，未应用相同宽度规则，宽度为内容自适应
• .navbar__item设置了100px高度，超出导航栏本身的80px高度，垂直对齐异常也会间接影响间距观感

解决方案 #

方案1：固定宽度统一（适合需要所有导航项宽度一致的场景）

修改CSS增加如下规则即可：

/* 修正导航项高度和导航栏一致 */
.navbar__item {
  height: 80px;
}
/* 给按钮项添加和普通导航链接一致的布局规则 */
.navbar__btn {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
}

调整后所有导航项宽度统一为125px，间距自然均匀。

方案2：自适应间距（更灵活，适配不同长度的链接文本）

不用固定每个链接的宽度，改用flex的gap属性控制项间距，适配性更强：

/* 给导航菜单添加统一间隙控制 */
.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem; /* 可自由调整数值控制导航项之间的间距 */
  margin: 0;
  padding: 0;
}
/* 移除固定宽度，改用padding控制点击区域 */
.navbar__links {
  color: #fff;
  text-decoration: none;
  padding: 0 1rem; /* 左右内边距增大可点击区域 */
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}
/* 修正导航项高度 */
.navbar__item {
  height: 80px;
  display: flex;
  align-items: center;
}

调整后会根据每个链接的文本长度自动分配宽度，所有项之间的间距完全一致，适配不同屏幕尺寸的表现更好。

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