gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:59:33 24 4
gpt4 key购买 nike

<分区>

Circle 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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com