作者jami520 (ALEN)
看板Web_Design
标题[问题] CSS进度条由右到左?
时间Fri Dec 10 07:07:33 2021
图例:
https://i.imgur.com/txapZ5p.png
想请问一下要如何修改成像上面想要的结果呢?
也就是进度条基准点是以右边为主
数值越大就越往左边延伸
谢谢
====css部分====
.Bars2 { position: relative; width: 200px;
/* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
.Bars2 div { display: block; position: relative;
background:#009900;/* 进度条背景颜色 */ color: #333333;
height: 20px; /* 高度 */ line-height: 20px;
}
.Bars2 div span { position: absolute; width: 200px;
/* 宽度 */ text-align: center; font-weight: bold; }
.cent2{ margin:0 auto; width:300px; overflow:hidden}
====html部分====
<div class="cent2">
<div class="Bars2">
<div style="width: 30%;">
<span><?php echo "-30";?></span>
</div>
</div>
</div>
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.160.122.7 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1639091255.A.AA2.html
1F：→ jami520: 找到解答，纪录一下，加上direction: rtl;即可 12/10 07:16