如何实现Logo与导航分类栏横向并排，完成三元素布局？

要实现Logo与导航栏横向并排，同时让header区域内的Logo+导航栏、用户信息两大模块横向分布，只需调整.main-nav的布局逻辑，具体修改如下：

修改后的CSS代码 #

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  font-size: 1.6rem;
}

.main-nav {
  display: flex; /* 让Logo和ul横向排列 */
  align-items: center; /* 垂直居中对齐，解决Logo和导航文字错位问题 */
}

.main-nav img {
  width: 7rem;
}

.main-nav__items {
  margin: 0 5rem;
  padding-left: 0; /* 清除ul默认左内边距 */
  list-style: none; /* 去掉默认列表符号 */
}

.main-nav li {
  text-transform: uppercase;
  display: inline-block;
  margin-right: 15px;
}

/* 可选：优化用户信息区域的对齐，保持视觉统一 */
.profile {
  display: flex;
  align-items: center;
  gap: 1rem; /* 用户名与头像的间距 */
}

.profile_photo {
  width: 3rem;
  height: 3rem;
  border-radius: 50%; /* 圆形头像示例样式 */
  background-color: #ccc; /* 占位背景色 */
}

对应HTML代码（结构无需改动） #

<header class="main-header">
  <nav class="main-nav">
    <img src="img/Disney-Logo.png" alt="Disney Logo">
    <ul class="main-nav__items">
      <li>ana sayfa</li>
      <li>arama</li>
      <li>izleme listem</li>
      <li>originals</li>
      <li>filmler</li>
      <li>diziler</li>
    </ul>
  </nav>
  <div class="profile">
    <span>Kaan Karakuş</span>
    <div class="profile_photo"></div>
  </div>
</header>

核心调整说明 #

• 给.main-nav设置display: flex和align-items: center，直接实现Logo与导航栏的横向并排+垂直居中对齐，解决原布局的错位问题。
• 移除.main-nav__items中display: inline-block和width: calc(100% - 220px)的冗余设置，避免干扰flex布局的自然排列逻辑。
• 清除ul的默认内边距和列表符号，让导航样式更整洁。
• 给用户信息区域添加flex布局，让用户名与头像也保持垂直居中，提升整体视觉一致性。

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