导航栏中h1与导航列表项无法对齐的技术求助

核心实现思路 #

通过Flexbox布局可以快速实现h1与导航列表的水平对齐，同时保证垂直方向居中，解决你当前的布局偏移问题。

修改后的完整代码示例 #

HTML 结构 #

<nav class="navbar">
  <h1>Connor Schotz</h1>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS 样式 #

.navbar {
  /* 开启Flex布局，让子元素横向排列 */
  display: flex;
  /* 让整体内容在容器内水平居中 */
  justify-content: center;
  /* 让子元素垂直方向居中对齐 */
  align-items: center;
  /* 控制h1和导航列表之间的间距，可根据需求调整数值 */
  gap: 2rem;
  padding: 1rem 0;
  background-color: #f5f5f5;
}

.nav-links {
  /* 导航列表同样用Flex横向排列 */
  display: flex;
  /* 清除列表默认的项目符号 */
  list-style: none;
  /* 控制导航项之间的间距 */
  gap: 1.5rem;
  /* 清除浏览器默认的内外边距，避免布局错位 */
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #333;
}

/* 可选布局：如果需要h1居左、导航居右，同时整体容器居中，可替换.navbar的样式为下面这段 */
/* .navbar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
} */

关键调整说明 #

1. Flex布局启用：给导航栏容器添加 display: flex，是实现横向对齐的核心，它会让子元素（h1和ul）自动在同一行排列。
2. 垂直对齐控制：align-items: center 确保h1和导航列表的文字基线对齐，不会出现一高一低的情况。
3. 清除默认样式：导航列表默认带有外边距和内边距，必须清除才能保证布局不受干扰。
4. 间距控制：用 gap 属性替代传统的margin设置元素间距，代码更简洁且不易出现布局bug。

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