作者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/m.aspx?n=bbs/Web_Design/M.1639091255.A.AA2.html
1F：→ jami520: 找到解答，紀錄一下，加上direction: rtl;即可 12/10 07:16