如何修复Logo与导航菜单间空白？实现二者靠拢且外侧留白均等

问题原因 #

当前.nav使用justify-content: space-between，会将Logo和导航菜单分别推向容器左右两端，导致中间出现过大空白，且无法保证外侧空白均等。

解决方案 #

通过调整Flex布局结构，让Logo与菜单整体居中，同时控制两者间的间距，实现外侧空白均等、内部靠拢的效果：

修改后的CSS代码

.nav {
  display: flex;
  align-items: center;
  justify-content: center; /* 让内部元素整体居中，保证左右空白均等 */
  margin: 10px 0; /* 保留上下间距，左右空白由居中自动分配 */
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px; /* 自定义Logo与菜单的间距，可按需调整 */
}

ul {
  display: flex;
  list-style: none;
  padding: 0; /* 移除ul默认的左侧内边距，避免布局偏移 */
}

ul li {
  padding: 8px 12px;
}

.nav .logo {
  width: 120px;
}

修改后的HTML代码

<div class="nav">
  <div class="nav-inner">
    <img class="logo" src="https://santabanta.co.in/wp-content/uploads/2023/11/vbes-2-1.png" alt="Logo">
    <ul>
      <li><a href="">Classes & Services</a></li>
      <li><a href="">Pricing</a></li>
      <li><a href="">Kids & Family</a></li>
      <li><a href="">Workshop</a></li>
      <li><a href="">Training</a></li>
    </ul>
  </div>
</div>

关键调整说明 #

• 为.nav设置justify-content: center，确保内部的nav-inner容器在水平方向居中，左右空白自动均等。
• 新增nav-inner容器包裹Logo和菜单，通过gap属性精准控制两者间的距离，实现靠拢效果。
• 移除ul默认的padding-left，避免菜单出现不必要的偏移。

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