如何将GSS文本与头部导航链接对齐到同一行并设置分隔间距

调整思路 #

• 给两个外层容器.gssnav和.navbar的共同父元素<nav>设置flex布局，让两个子容器默认横向排列在同一行
• 移除.gssnav原有的居中对齐设置，避免GSS文字在自身容器内居中
• 通过父容器的column-gap属性或者给.gssnav添加右外边距实现两个容器的大间隔
• 可选配置：给<nav>设置水平居中、垂直对齐、最大宽度等，让导航整体展示更协调

最终修改后的CSS代码 #

/* 新增nav元素的样式 */
nav {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直方向居中对齐GSS和导航链接 */
  justify-content: center; /* 整体导航内容水平居中 */
  column-gap: 80px; /* 两个容器之间的间隔，可根据需求调整数值 */
  max-width: 1200px; /* 可选：限制导航最大宽度，避免宽屏下间隔过大 */
  margin: 0 auto; /* 可选：配合max-width实现导航整体水平居中 */
}

.gssnav {
  /* 移除原来的justify-content: center，不需要GSS在自身容器内居中 */
  display: flex;
  flex-direction: row;
  font-size: 24px; /* 可选：调整GSS文字大小，可自定义 */
  font-weight: bold; /* 可选：加粗GSS文字突出显示，可自定义 */
}

.nav-padding {
  margin-top: 30px;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 30px;
}

.navlink {
  cursor: pointer;
  color: #000000;
  border: 1px solid transparent; /* 修正原透明边框的写法，避免hover时边框跳动 */
  transition: all 500ms ease; /* 把过渡移到默认状态，鼠标移出时也有过渡效果 */
}

.navlink:hover {
  cursor: pointer;
  color: #ffffff;
  border-color: var(--primary); /* 修正原border写法，primary是CSS变量的话要加var()，如果是固定颜色直接写色值即可 */
}

补充说明 #

• HTML代码不需要做任何修改，直接沿用原有结构即可
• 两个容器的间隔可以通过调整nav的column-gap数值自定义，数值越大间隔越大
• 如果你需要导航贴边对齐而不是整体居中，把nav的justify-content: center改成justify-content: space-between，同时给nav加左右内边距即可。

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