如何正确将导航栏中的两个ul分别左/右对齐（不使用float）

不用float的话，直接给导航栏容器用Flex布局就能搞定，还能彻底解决垂直对齐不均的问题，修改步骤如下：

• 给.navbar设置display: flex，将其转为Flex容器
• 添加justify-content: space-between，让内部两个ul分别靠向左右两端
• 添加align-items: center，确保左右两个ul在垂直方向上居中对齐，解决行高不均的问题

修改后的完整代码：

HTML（无需修改） #

<nav class="navbar">
  <ul class="navbar__left">
    <li>
      <a href="">Home</a>
    </li>
  </ul>
  <ul class="navbar__right">
    <li>
      <a href="">Register</a>
    </li>
    <li>
      <a href="">Login</a>
    </li>
  </ul>
</nav>

SCSS版本样式 #

.navbar {
  border: 1px solid black;
  /* 核心修改：设置Flex容器 */
  display: flex;
  justify-content: space-between;
  align-items: center;

  ul {
    display: flex;
    padding: 0;
    /* 可选：统一上下内边距，避免内容贴边 */
    margin: 0.5em 0;
  }

  li {
    margin: 0 1em;
    list-style-type: none;
  }

  a {
    text-decoration: none;
  }
}

普通CSS版本样式 #

.navbar {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar ul {
  display: flex;
  padding: 0;
  margin: 0.5em 0;
}

.navbar li {
  margin: 0 1em;
  list-style-type: none;
}

.navbar a {
  text-decoration: none;
}

原理说明：Flex布局是当前布局的首选方案，比float更可控。justify-content: space-between会自动分配容器内的剩余空间，把两个子元素推到两端；align-items: center强制所有子元素在垂直方向上居中，彻底解决你之前遇到的行高对齐问题。

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