Circle CSS无论里面包含1位、2位还是3位数字都需要保持一致

Question

由于位数发生变化，圆形 CSS 不一致。如果该值为一位数，则圆形形状变为鸡蛋形状。而当该值为三位数时，形状会变得扭曲。

.my-progress-value {
  background-color: deepskyblue;
  color: white;
  border-radius: 100%;
  font-size: 7pt;
  padding: 8px 5px 8px 5px;
  position: absolute;
  margin-top: -11px;
}
.my-progress-container {
  width: 200px;
  padding-top: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-progress {
  background-color: deepskyblue;
  width: 60%;
  height: 8px;
  text-align: right;
}

<div class="col-md-3" id="1">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">0</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="2">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">49</span>
    </div>
  </div>
</div>
<div class="col-md-3" id="3">
  <div class="my-progress-container">
    <div class="my-progress">
      <span class="my-progress-value">100</span>
    </div>
  </div>
</div>

这是小提琴

Answer 1

设置height与课堂width上相同.my-progress-value。

 .my-progress-value {
        background-color: deepskyblue;
        color: white;
        border-radius: 100%;
        font-size: 7pt;
        padding: 8px 5px 8px 5px;
        position: absolute;
        margin-top: -11px;
        width:50px; //add this
        height:50px;  //add this
    }