CSS 說(shuō)明橫向進(jìn)度條最后顯示文字的實(shí)現(xiàn)代碼
發(fā)布時(shí)間：2020-11-10 09:43:21 作者：胖鵝68 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS 說(shuō)明橫向進(jìn)度條最后顯示文字的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
問(wèn)題描述
在工作中想要實(shí)現(xiàn)如下效果：
解決思路
在 div 標(biāo)簽中添加一個(gè) relative 定位，然后使用絕對(duì)定位 absolute 在最右側(cè)
<div class="content">
<div class="bar first" style="width:100%">
<span>688</span>
</div>
<div class="bar second" style="width:50%">
<span>688</span>
</div>
<div class="bar third" style="width:80%">
<span>688</span>
</div>
</div>
自己的解決辦法
.bar {
height: 12px;
margin-top: 1px;
position: relative;
&.first {
background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
}
&.second {
background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
}
&.third {
background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
}
span{
position: absolute;
right: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
}
結(jié)果：
按照上面的寫(xiě)法，只能是 span 標(biāo)簽的最右側(cè)和父標(biāo)簽div 的最右側(cè)重疊，無(wú)法實(shí)現(xiàn)目標(biāo)。解決辦法，計(jì)算 span標(biāo)簽的值，然后right 設(shè)置為計(jì)算的長(zhǎng)度
考慮到上述實(shí)現(xiàn)需要依賴(lài)于js,而且過(guò)于麻煩，想想有沒(méi)有辦法只通過(guò)CSS實(shí)現(xiàn)目標(biāo)呢？
解決辦法一： left: 100%;
.bar {
height: 12px;
margin-top: 1px;
position: relative;
&.first {
background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
}
&.second {
background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
}
&.third {
background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
}
span{
position: absolute;
left: calc(100% + 8px);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
}
left 參照的寬度是 父容器 的寬度
解決辦法二： right:0; transform: translate(100%, 0)
.bar {
height: 12px;
margin-top: 1px;
position: relative;
&.first {
background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
}
&.second {
background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
}
&.third {
background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
}
span{
position: absolute;
right:0;
transform: translate(100%, 0);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
}
transform: translate 參照的寬度是自身內(nèi)容的寬度
到此這篇關(guān)于CSS 說(shuō)明橫向進(jìn)度條最后顯示文字的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)css橫向進(jìn)度條顯示文字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css 橫向進(jìn)度條和豎向進(jìn)度條實(shí)現(xiàn)代碼
這篇文章主要介紹了css 橫向進(jìn)度條和豎向進(jìn)度條實(shí)現(xiàn)代碼,有時(shí)候看一些不錯(cuò)的滾動(dòng)條效果不錯(cuò)，這里給大家分享一下如果用css實(shí)現(xiàn)2020-04-14