将按钮与换行文本并排垂直对齐

Posted 2023-03-05

【中文标题】将按钮与换行文本并排垂直对齐

【英文标题】：Vertically align buttons with wrapped text, side by side

【发布时间】：2018-08-11 00:26:39

【问题描述】：

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

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

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

button 
  width: 50%;
  height: 40px;

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

【参考方案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>

【讨论】：

baseline，好的有道理。谢谢。

【参考方案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>