如何用Flexbox实现两个无序列表同行左右排列？

我明白你想通过Flexbox实现两个导航列表一左一右同行排列的需求，咱们先揪出问题根源——你现在把flex属性加在了每个<ul>上，但实际上应该让容纳这两个列表的父元素（也就是.navigation）成为flex容器才行！

下面是修正后的完整方案，顺便给你拆解每个属性的作用，帮你吃透Flexbox的逻辑：

1. 参考HTML结构 #

假设你的基础HTML是这样的：

<div class="navigation">
  <ul class="leftNav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
  <ul class="rightNav">
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
  </ul>
</div>

2. 修正后的CSS代码 #

/* 核心：把父容器设置为Flex容器 */
.navigation {
  display: flex;
  justify-content: space-between; /* 直接让两个子元素分别靠左右两端 */
  align-items: center; /* 可选：让两个列表垂直居中对齐，避免高低不齐 */
}

/* 两个列表作为Flex项目，只需要基础样式 */
.navigation ul {
  list-style: none;
  padding: 0; /* 去掉浏览器默认的内边距，避免排版偏移 */
  margin: 0; /* 去掉默认外边距，让布局更干净 */
}

/* 如果需要列表项横向排列，给ul加flex（这是列表内部的排版，和双列表同行无关） */
.navigation ul {
  display: flex;
  gap: 15px; /* 给列表项之间加间距，比margin更方便 */
}

.navigation a {
  text-decoration: none;
  color: #333;
}

关键逻辑拆解 #

• .navigation作为Flex容器时，它的直接子元素（两个<ul>）会自动变成Flex项目，默认就会在同一行排列（因为flex-direction默认值是row）。
• justify-content: space-between是实现左右对齐的关键：它会让第一个Flex项目（左列表）贴左，最后一个Flex项目（右列表）贴右，中间自动填充空白区域。
• 如果你不想用space-between，也可以给.leftNav加margin-right: auto——它会自动占据容器内的剩余空间，把.rightNav挤到最右侧，效果完全一致：

  .navigation {
    display: flex;
    align-items: center;
  }
  .leftNav {
    margin-right: auto;
  }
  

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