如何修复导航菜单排版异常与Logo裁剪问题？

现存问题 #

• Logo被莫名裁剪
• 包含空格的菜单项无法横向排列，自动变为纵向布局，移除空格则恢复正常

问题根源 #

1. Logo裁剪：int42h类使用object-fit: cover会强制裁剪图片填充容器；header__logo的width:100%让容器宽度被父元素挤压，进一步导致图片变形裁剪。
2. 菜单项换行：menu__item设置了flex-wrap: wrap，带空格的文本被识别为可换行节点，触发了换行；多余的justify-content: space-between也干扰了正常布局。

修改后的完整代码 #

CSS 代码

.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  min-height: 40px;
}

.container {
  max-width: 1950px;
  padding: 20px 20px; /* 左右加内边距，避免内容贴屏幕边缘 */
  margin: 0 auto;
}

.header__body {
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__main {
  display: flex;
  align-items: center; /* 让Logo和菜单垂直居中对齐 */
  gap: 30px; /* Logo与菜单之间的间距 */
}

.header__menu {
  display: flex;
}

.header__logo {
  width: auto; /* 取消100%宽度，让容器随图片自适应 */
  height: 70px; /* 保持固定高度 */
  margin: 0;
}

.int42h {
  width: auto; /* 图片按原比例缩放 */
  height: 100%; /* 填充容器高度 */
  object-fit: contain; /* 完整显示图片，不裁剪 */
}

.menu__list {
  display: flex;
  gap: 15px; /* 菜单项之间的间距 */
  padding: 0;
  margin: 0;
  list-style: none; /* 去掉默认列表圆点 */
}

.menu__item {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  white-space: nowrap; /* 强制文本不换行，解决空格导致的纵向排列 */
}

.menu__link {
  font-size: 26px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none; /* 去掉默认链接下划线 */
  transition: color 0.3s ease;
}

.header__login {
  padding: 0 20px;
}

/* 响应式适配：中等屏幕缩小字体 */
@media (max-width: 1024px) {
  .menu__link {
    font-size: 20px;
  }
}

/* 小屏幕改为堆叠布局 */
@media (max-width: 768px) {
  .header__main {
    flex-direction: column;
    gap: 15px;
  }
  .menu__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

HTML 代码（补充完整闭合标签）

<div class="header">
  <div class="header__container container">
    <div class="header__body">
      <div class="header__main">
        <div class="header__logo">
          <img src="assets/img/logo.png" alt="网站Logo" class="int42h">
        </div>
        <div class="header__menu">
          <nav class="menu__body">
            <ul class="menu__list">
              <li class="menu__item"><a href="" class="menu__link">SCHOOL</a></li>
              <li class="menu__item"><a href="" class="menu__link">ORGANISATION</a></li>
              <li class="menu__item"><a href="" class="menu__link">UNIVERSITY</a></li>
              <li class="menu__item"><a href="" class="menu__link">COURSES LIST</a></li>
              <li class="menu__item"><a href="" class="menu__link">BLOG</a></li>
              <li class="menu__item"><a href="" class="menu__link">FOR US</a></li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="header__login">
        <a href="#" class="login__link">Login</a>
      </div>
    </div>
  </div>
</div>

修复要点总结 #

1. Logo修复：用object-fit: contain替代cover，取消容器100%宽度，确保图片完整显示
2. 菜单项修复：添加white-space: nowrap强制文本不换行，移除多余的flex换行属性
3. 响应式优化：通过媒体查询在不同屏幕尺寸下调整字体大小和布局结构，适配移动端

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