如何在CSS中正确实现Div的左右对齐？

我尝试在CSS中实现Div的左右对齐，但未能成功，期望达到的布局效果如下：

原代码 #

CSS代码：

.main {
  display: flex;
  width: 100%;
}

.div1 {
  float: left;
}

.div2 {
  float: left;
}

.div3 ul>li {
  display: inline-block;
}

li:first-child {
  border-right: 1px solid #ccc;
}

.btns {
  display: flex;
}

.div4 {
  float: right;
}

HTML代码：

<div class="main">
  <div class="div1">
    Heading Heading Heading
  </div>

  <div class="div2">

    <div class="div3">
      <ul>
        <li> car </li>
        <li> bus </li>
      </ul>
      <div class="btns">
        <button>One</button>
        <button>Two</button>
      </div>
    </div>
    <div class="div4">
      <div class="btns">
        <button>One</button>
        <button>Two</button>
      </div>
    </div>

  </div>

</div>

解决方案 #

问题出在混用了flex和float属性——在flex容器中，float完全失效，需基于flex布局重新调整：

1. 移除所有float属性，改用flex的对齐属性控制元素位置
2. 给.main添加justify-content: space-between，让.div1和.div2分别靠容器左右两侧
3. 给.div2设置display: flex和justify-content: space-between，让内部的.div3和.div4实现左右对齐
4. 给.div3设置display: flex和align-items: center，让列表和按钮组横向排列且垂直居中

修改后的代码如下：

修改后的CSS：

.main {
  display: flex;
  width: 100%;
  justify-content: space-between; /* 让子元素左右分布 */
  align-items: center; /* 垂直居中对齐 */
}

.div2 {
  display: flex;
  justify-content: space-between;
  width: 60%; /* 可根据需求调整宽度，确保内部元素有足够空间 */
  align-items: center;
}

.div3 {
  display: flex;
  align-items: center; /* 让列表和按钮垂直居中 */
  gap: 1rem; /* 列表和按钮之间的间距 */
}

.div3 ul>li {
  display: inline-block;
  padding: 0 0.5rem;
}

li:first-child {
  border-right: 1px solid #ccc;
}

.btns {
  display: flex;
  gap: 0.5rem; /* 按钮之间的间距 */
}

修改后的HTML：

<div class="main">
  <div class="div1">
    Heading Heading Heading
  </div>

  <div class="div2">
    <div class="div3">
      <ul>
        <li> car </li>
        <li> bus </li>
      </ul>
      <div class="btns">
        <button>One</button>
        <button>Two</button>
      </div>
    </div>
    <div class="div4">
      <div class="btns">
        <button>One</button>
        <button>Two</button>
      </div>
    </div>
  </div>
</div>

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