垂直对齐带有包装文本的按钮，并排

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 to 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

显示： .container上的.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>