css - 如何在不使用自动调整大小的情况下制作灵活的按钮

Question

我是 CSS 的新手，我有按钮，顶部有文本和值，值是可变的，有时大有时小，我希望我的按钮大小相同但可以根据值的大小灵活调整，我也提供了一个演示来更好地阐明我的问题:

.btnsForCrew-Common {
  border-radius: 10px;
  font-size: xx-small;
  width: 15%;
}

.CrewPrsntButtonsIdle {
  color: black;
  background: linear-gradient(to bottom, lightgreen 15%, white 10%);
}

.FontsForCrewPresents {
  font-size: 40px
}

<button type="button" id="btnIdle" class="btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">ERROR</span>
  <br><br>
  <span class="FontsForCrewPresents"> 254</span>    
</button>

<button type="button" id="btnIdle1" class="btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">IDLE</span>
  <br><br>
  <span class="FontsForCrewPresents"> 100</span>    
</button>

<button type="button" id="btnIdle2" class="btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">WAITING To RUN</span>
  <br><br>
  <span class="FontsForCrewPresents"> 600000</span>    
</button>

我不想自动调整大小的原因是；它使尺寸不同，我不想要那样。这是演示:

DEMO

Answer 1

您可以通过将它们包装在一个内联 block 元素中并使它们的宽度为 100% 来使它们的大小相同 - 然后它们将与最大的一样长:

.wrapper {
  display:inline-block;
}
.wrapper > button {
  width:100%;
}

.btnsForCrew-Common {
  border-radius: 10px;
  font-size: xx-small;
}

.CrewPrsntButtonsIdle {
  color: black;
  background: linear-gradient(to bottom, lightgreen 15%, white 10%);
}

.FontsForCrewPresents {
  font-size: 40px;
  line-height:40px;
}

<div class="wrapper">
  <button type="button" id="btnIdle" class="btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">ERROR</span>
  <br><br>
  <span class="FontsForCrewPresents"> 254</span>    
</button>

  <button type="button" id="btnIdle1" class="btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">IDLE</span>
  <br><br>
  <span class="FontsForCrewPresents"> 100</span>    
</button>

  <button type="button" id="btnIdle2" class="btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">WAITING To RUN</span>
  <br><br>
  <span class="FontsForCrewPresents"> 600000</span>    
</button>
</div>