使用 CSS 将项目与不同的父项均匀对齐

Answer 1

您可以使用按钮容器元素上的

display: contents

来完成此操作。

.container {
  display: flex;
  justify-content: space-between;
  outline: 1px solid red;
  margin: 2em;
}

.buttons {
  display: contents;
}

<div class="container">

  <div class="buttons">
    <button>
 test
 </button>
    <button>
 test
 </button>
    <button>
 test
 </button>
    <button>
 test
 </button>
  </div>
  <button class="outer">
test
</button>
</div>