html - 按钮不依赖于内容，大小相同

Question

当按钮内放置不同的内容时，我很难让所有按钮的大小相同。寻找一些可以帮助我更好地理解这一点的提示和技巧。 这是 situasjon 的图片:

这是我用于按钮部分的 css 代码:

  .but {
background-color: white;
color: black;
border: 2px solid #C8C8C8;
height: 1.5em;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
cursor: pointer;
margin: -2px;
}

.symbox {
width: 20em;
height: 5.2em;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
margin: 1px 0px;
}

.but 是所有按钮，.symbox 是按钮周围的边框

Answer 1

你可以使用flexbox，像这样:

.container {
  width: 4em;
  
  display:flex;
  flex-wrap:wrap;
}
.but {
  border: 2px solid #ccc;
  padding: 2px;
  text-align: center;
  
  flex-grow: 1;
}

<div class="container">
  <div class="but">a</div>
  <div class="but">b</div>
  <div class="but">c</div>
  <div class="but">de</div>
  <div class="but">f</div>
  <div class="but">ghi</div>
  <div class="but">j</div>
  <div class="but">k</div>
  <div class="but">l</div>
  <div class="but">m</div>  
</div>

这是关于如何有效使用 flexbox 的非常好的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/