垂直對齊帶有包裝文本的按鈕，並排

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>