Circle CSS需要保持一致，无论它是否包含1位，2位或3位数字[重复]答案

【问题标题】：Circle CSS needs to be consistent whether it contains 1 digit ,2 digit or 3 digit number inside it [duplicate]Circle CSS需要保持一致，无论它是否包含1位，2位或3位数字[重复]
【发布时间】：2016-03-13 00:45:48
【问题描述】：

随着位数的变化，圆形 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>

这里是Fiddle

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

在.my-progress-value 类中设置相同的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
    }

【讨论】：

【解决方案2】：

您需要添加固定宽度以实现您的目的，因为它的计算宽度是自动的，目前在“my-progress-value”类上尝试width: 30px; 我希望这能解决你的问题

检查链接 http://jsfiddle.net/e8fqLdfy/3/

【讨论】：