这篇文章将为大家详细讲解有关CSS怎么实现横向进度条最后显示文字，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在工作中想要实现如下效果：
在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧
计算
安全
数据库
网络和加速
企业服务
<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);
}
}结果：
按照上面的写法，只能是 span 标签的最右侧和父标签div 的最右侧重叠，无法实现目标。解决办法，计算 span标签的值，然后right 设置为计算的长度
.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 参照的宽度是 父容器 的宽度
.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 参照的宽度是自身内容的宽度
关于“CSS怎么实现横向进度条最后显示文字”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/css/751495.html
