圆圈CSS无论是1位、2位还是3位数字都需要保持一致

Question

圆圈 CSS 不一致，因为位数正在改变。如果该值为一位数，则圆形变为蛋形 shape.And 当它为三位数时，形状会变形。

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

这里是Fiddle

Answer 1

您需要添加固定宽度来实现您的目的，因为它的计算宽度目前是自动的尝试 width: 30px; on "my-progress-value" class 我希望这会解决你的问题

检查link http://jsfiddle.net/e8fqLdfy/3/

Answer 2

在 .my-progress-value class 中设置相同的 height 和 width。

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

圆圈CSS无论是1位、2位还是3位数字都需要保持一致

Circle CSS needs to be consistent whether it contains 1 digit ,2 digit or 3 digit number inside it

html

css

css-shapes