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>34.123</button>
  <button>4.123</button>
  <button>4.3</button>
  <button></button>
</div>

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

HTML/CSS trying to size buttons so they are all the same size

html

css

button

padding

sizing