如何实现两组上下排列按钮分别左、右对齐？

你之前的问题在于没有正确使用Flex布局的逻辑：align-items是控制flex容器内元素在交叉轴的对齐方式，且它的有效值里没有left（应该用flex-start这类值），同时必须先把父容器设置为flex容器，才能让子元素按预期分布。下面给你两种可靠的实现方案：

方案1：Flexbox布局（推荐，语义化且灵活） #

通过父容器的flex布局实现左右分组，每组内部再用垂直flex排列按钮，同时保证两组垂直对齐：

<div class="button-wrapper">
  <div class="button-column">
    <button>左侧按钮1</button>
    <button>左侧按钮2</button>
  </div>
  <div class="button-column">
    <button>右侧按钮1</button>
    <button>右侧按钮2</button>
  </div>
</div>

<style>
.button-wrapper {
  display: flex;
  justify-content: space-between; /* 让两组分别贴紧左右两侧 */
  align-items: center; /* 保证两组在垂直方向居中对齐 */
  padding: 15px; /* 可选：给容器加内边距 */
}

.button-column {
  display: flex;
  flex-direction: column; /* 按钮上下排列 */
  gap: 10px; /* 按钮之间的间距，可按需调整 */
}

.button-column button {
  padding: 8px 18px;
  width: 130px; /* 可选：统一按钮宽度，让对齐更规整 */
}
</style>

方案2：Grid布局 #

如果更习惯Grid逻辑，也可以用两列网格实现：

<div class="button-grid">
  <div class="button-column">
    <button>左侧按钮1</button>
    <button>左侧按钮2</button>
  </div>
  <div class="button-column">
    <button>右侧按钮1</button>
    <button>右侧按钮2</button>
  </div>
</div>

<style>
.button-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.button-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button-column button {
  padding: 8px 18px;
  width: 130px;
}
</style>

这两种方案都能保证两组按钮的垂直对齐（比如左侧第一个按钮和右侧第一个按钮在同一水平线），且布局响应性更好，比table标签的语义化更合理。

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