[問題] CSS進度條由右到左?

作者: jami520 (我的生命因你而發光)   2021-12-10 07:07:33
圖例:
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>
作者: jami520 (我的生命因你而發光)   2021-12-10 07:16:00
找到解答,紀錄一下,加上direction: rtl;即可

Links booklink

Contact Us: admin [ a t ] ucptt.com