带Logo的水平导航栏布局求助：Logo左对齐、链接右对齐

你的核心需求是让多个Logo紧凑靠左排列，导航链接靠右，中间留空。当前代码的问题在于：三个Logo是独立的flex项，和ul一起被justify-content: space-between分散开，导致Logo之间出现不必要的空隙。

修改后的完整代码 #

HTML

<nav>
  <div class="logo-group">
    <img src="images/Logo1.svg" class="logo">
    <img src="images/Logo2.svg" class="logo">
    <img src="images/Logo3.svg" class="logo">
  </div>
  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
  </ul>
</nav>

CSS

nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 8%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 保留该属性，现在作用于logo-group和ul两个整体 */
  box-sizing: border-box; /* 避免padding撑宽导航栏 */
}

nav .logo-group {
  display: flex; /* 让内部Logo横向紧凑排列 */
  gap: 12px; /* 可选：控制Logo之间的间距，按需调整 */
}

nav .logo {
  width: 40px;
}

nav ul {
  margin: 0;
  padding: 0; /* 清除ul默认内外边距，消除布局偏移 */
}

nav ul li {
  list-style: none;
  display: inline-block;
  margin-left: 40px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

关键调整说明 #

• 用div.logo-group包裹所有Logo，将它们合并为一个flex项，确保justify-content: space-between只在Logo组和导航链接组之间分配空白。
• 给logo-group设置display: flex，保证内部Logo横向并排，gap属性可灵活控制Logo间的间距。
• 添加box-sizing: border-box到nav，避免padding导致导航栏宽度超出100%。
• 重置ul的默认内外边距，消除浏览器默认样式带来的布局偏差。

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