如何解决使用position:absolute布局时三个行内文本元素重叠的问题

开发者阿泽

2026-10-14

问题原因

你当前给每个.center-nav元素单独设置了position: absolute + left: 50%，三个元素都会定位到导航栏水平居中的同一个位置，自然会出现重叠问题。

修复方案

直接给导航容器nav.space设置flex布局实现居中排列，既可以保证三个链接横向并排，也可以灵活调整间距：

修改后的CSS代码

.navbar {
  background: var(--button);
  height: 121px;
  position: relative;
  /* 可选：如果要logo和导航整体垂直居中可以保留这段，不需要可删除 */
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.navbar .container {
  /* 让容器占满剩余宽度，方便导航在剩余空间居中 */
  flex: 1;
}

nav.space {
  /* 启用flex布局 */
  display: flex;
  /* 水平居中三个链接 */
  justify-content: center;
  /* 垂直居中链接，调整数值可以修改导航的垂直偏移位置 */
  align-items: center;
  height: 121px;
  /* 自定义调整链接之间的间距，数值可按需修改 */
  gap: 40px;
}

.navbar .container .center-nav {
  text-decoration: none;
  color: white;
  display: inline-block;
  /* 左右内边距可按需保留或删除 */
  padding-left: 20px;
  padding-right: 20px;
}