如何使行中的所有按钮与具有动态高度的按钮对齐答案

【问题标题】：How to make all buttons in row aligned with button that has dynamic height如何使行中的所有按钮与具有动态高度的按钮对齐
【发布时间】：2020-02-27 04:53:26
【问题描述】：

我在 React 的一排按钮上显示来自 API 的数据。对于其中一个按钮，我将宽度设置为 200 像素。如果超过 200px 限制，该按钮会动态更改高度以适应数据。但是，我的其他按钮与此按钮的高度不一致。无论是否达到宽度像素限制，如何使它们全部对齐？

'& .myLongTextButton': {
  width: '200px'
},
'& .myShortTextButton': {
  width: '50px'
}

<Button className="myLongTextButton">{data.long_text}
</Button>
<Button className="myShortTextButton">{data.short_text}
</Button>

【问题讨论】：

如果没有可生产的例子，我们如何猜测？我们如何知道Button 的样式？

标签： html css reactjs button

【解决方案1】：

你可以做的是用一个 flexbox 容器包裹两个按钮。例如：

'& .container': {
  display: inline-flex;
}
'& .myLongTextButton': {
  width: '200px'
},
'& .myShortTextButton': {
  width: '50px'
}

<div classname="container">
 <Button className="myLongTextButton">{data.long_text}
 </Button>
 <Button className="myShortTextButton">{data.short_text}
 </Button>
</div>

【讨论】：

@bag02832 然后请投票并接受答案?