HTML/CSS 试图调整按钮的大小，使它们的大小都相同

Question

尝试调整这些按钮的大小，使它们的大小相同。

    display: block;
    padding: 0 2rem;
    border: 1px solid 
#fff;
font-size: 12px;
color:
    #000000;
    height: 45px;
    line-height: 43px;
    margin: 5px;
}

这是我目前正在使用的 css，我该怎么做才能使它们大小相同？

Answer 1

一个可能的解决方案是包裹按钮并添加最大宽度，然后使用 flexbox 调整它们的大小？

.buttons {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}
button {
  border: 1px solid #000;
  padding: 1rem;
  margin-bottom: 10px;
  font-size: 1rem;
}

<div class="buttons">
  <button>$1234.123</button>
  <button>$234.123</button>
  <button>$124.3</button>
  <button>$14</button>
</div>