并排垂直对齐带有换行文本的按钮

Question

我想并排显示多个按钮，这不是问题。
但是我有一个或多个带有换行文本的按钮，因为按钮太小（应该是这样）。

如果一个按钮的文本被换行，它们将无法正确并排显示。
带有环绕文字的按钮低于另一个。
是什么原因造成的，我该如何预防？

.container {
  width: 200px;
  border: 1px solid black;
}
button {
  width: 50%;
  height: 40px;
}

<div class="container">
  <button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>

Answer 1

按钮是 inline 个元素，默认情况下 baseline 垂直对齐...

...所以使用 vertical-align:top 到 button...

堆栈片段

.container {
  width: 200px;
  border: 1px solid black;
}

button {
  width: 50%;
  height: 40px;
  vertical-align: top;
}

<div class="container">
  <button>TEST</button><button>TEST WRAP TEXT</button>
</div>

Answer 2

display:flex .container 上的技巧。

由于您需要按钮成为其容器的 50%，这是最好的方法。

.container {
  width: 300px;
  display: flex;
  border: 1px solid black;
}

button {
  flex: 1;
  height: 40px;
}

<div class="container">
  <button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>

Vertically align buttons with wrapped text, side by side