如何使行中的所有按鈕與具有動態高度的按鈕對齊

Question

我在 React 中的一行按鈕上顯示來自 API 的數據。 對於其中一個按鈕，我將寬度設置為 200 像素。 如果超過 200 像素的限制，該按鈕會動態更改高度以適應數據。 但是，我的其他按鈕與此按鈕的高度不一致。 無論是否達到寬度像素限制，如何使它們全部對齊？

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

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

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