Question

我是CSS的新手，我有按钮，文字和值在顶部，值是可变的，有时很大，有时小，我希望我的按钮大小相同但灵活的大小价值观，我也提供了一个演示，以更好地澄清我的问题：

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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

DEMO

Answer 1

你可以通过将它们包装在一个内联块元素中并使它们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>

Answer 2

.btn-container {
  display: block;
  width: 100%;
  
}

.btnsForCrew-Common {
  border-radius: 10px;
  font-size: xx-small;
  width:50%;
  margin: 5px;
}

.CrewPrsntButtonsIdle {
  color: black;
  background: linear-gradient(to bottom, lightgreen 20%, white 10%);
}

.FontsForCrewPresents {
  font-size: 40px
}


/*for auto resize
********
.btn {
  border: 1px solid gray;
  max-width: 100%;
  display: block;
  margin: 10px;
}
********
*/

<div class="btn-container">
  <button type="button" id="btnIdle" class="btn 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="btn 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="btn btnsForCrew-Common CrewPrsntButtonsIdle"> 
  <span style="color:black;font-weight:bold;">WAITING To RUN</span>
  <br><br>
  <span class="FontsForCrewPresents"> 600000</span>    
</button>
</div>

不使用自动调整大小如何制作灵活的按钮

2 个答案: