CSS新手遇到nav标签与内部div间距过大无法同行对齐问题

问题根因 #

• 你为logo图片设置了width="10%"，该百分比是相对于父容器#logo的宽度计算，但#logo没有设置固定宽度，默认由内容撑开，会触发宽高计算逻辑异常，导致图片占用远超预期的宽度，进而挤压后续导航列表的空间，出现间距过大甚至换行的问题。
• flex容器未设置子元素对齐规则，默认会保留多余空白区域，也会放大两个元素的视觉间距。

修复方案 #

修改核心逻辑为固定logo宽度，通过flex布局的对齐和间距属性控制元素位置，修改后的代码如下：

CSS代码 #

/* CSS RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#navbar {
  align-items: center;
  display: flex;
  justify-content: flex-start; /* 子元素靠左对齐，避免多余空白散开 */
  gap: 30px; /* 直接控制logo和导航列表的间距，可按需调整数值 */
  padding: 10px 20px;
}

/* Logo And Image */
#logo img {
  display: block; /* 消除图片默认的底部基线空隙 */
  width: 80px; /* 固定logo宽度，可按需调整数值 */
  height: auto;
}

/* Navigation Bar:-List Styling */
#navbar ul {
  display: flex;
  list-style: none; /* 去掉列表默认圆点 */
  gap: 25px; /* 控制菜单项之间的间距，可按需调整数值 */
}

HTML代码 #

<nav id="navbar">
  <div id="logo">
    <img src="top.png" alt="Image Failed To Load !" />
  </div>
  <ul>
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Recommendations</a></li>
    <li class="item"><a href="#">Contact Me</a></li>
  </ul>
</nav>
<section class="home">
  <h1 class="h-primary">
    Lorem ipsum
  </h1>
</section>

额外说明 #

如果需要实现logo靠左、导航菜单靠右的布局，只需把#navbar的justify-content属性值改为space-between即可。

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