Question

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

如果一个按钮的文字被包裹，它们并不能正确并排显示带有文本的按钮比另一个低。
是什么导致这种情况，我该如何预防？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Stack Snippet

.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

.container上的

display:flex 可以解决问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;