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

Question

当按钮内放置不同的内容时，我很难获得所有按钮相同的大小。寻找一些技巧和技巧，可以帮助我更好地理解这一点。 这是一张情况图：

这是我用于按钮部分的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;
}

。但是所有按钮和.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/