如何将菜单栏定位在Logo对面？已尝试CSS相对定位无效

方法1：使用Flex布局（推荐） #

直接给Logo和菜单栏的父容器设置Flex布局，通过justify-content: space-between实现两端对齐，这是最简洁且适配性最好的方案。

示例代码 #

<header class="header-container">
  <div class="logo">我的Logo</div>
  <nav class="menu">
    <ul>
      <li>首页</li>
      <li>产品</li>
      <li>联系我们</li>
    </ul>
  </nav>
</header>

.header-container {
  display: flex;
  justify-content: space-between; /* 让子元素分别靠左右两端 */
  align-items: center; /* 垂直方向居中对齐 */
  padding: 0 20px;
  height: 60px;
  background-color: #ffffff;
}

.menu ul {
  display: flex;
  list-style: none;
  gap: 24px; /* 控制菜单项之间的间距 */
  margin: 0;
  padding: 0;
}

方法2：使用Grid布局 #

如果习惯用Grid，也可以通过网格列分配实现同样效果：

.header-container {
  display: grid;
  grid-template-columns: 1fr auto; /* 第一列占满剩余空间，第二列自适应宽度 */
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #ffffff;
}

.menu ul {
  display: flex;
  list-style: none;
  gap: 24px;
  margin: 0;
  padding: 0;
}

方法3：绝对定位方案（适合特殊场景） #

你之前单独给菜单栏设position: relative没效果，是因为relative只是让元素相对于自身原位置偏移，不会改变它在文档流中的位置。要实现靠右，需要配合父容器的相对定位：

示例代码 #

.header-container {
  position: relative; /* 父容器设为相对定位，作为子元素绝对定位的参照 */
  padding: 0 20px;
  height: 60px;
  background-color: #ffffff;
}

.logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

.menu {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.menu ul {
  display: flex;
  list-style: none;
  gap: 24px;
  margin: 0;
  padding: 0;
}

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