CSS 说明横向进度条最后显示文字的实现代码


Posted in HTML / CSS onNovember 10, 2020

问题描述

在工作中想要实现如下效果:

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 设置为计算的长度

CSS 说明横向进度条最后显示文字的实现代码

考虑到上述实现需要依赖于js,而且过于麻烦,想想有没有办法只通过CSS实现目标呢?

解决办法一: 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 参照的宽度是自身内容的宽度

到此这篇关于CSS 说明横向进度条最后显示文字的实现代码的文章就介绍到这了,更多相关css横向进度条显示文字内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 #HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 #HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 #HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 #HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
You might like
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python实现滑雪游戏
2020/02/22 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
小学毕业典礼主持词
2014/03/27 职场文书
初二物理教学反思
2016/02/19 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
Nginx内网单机反向代理的实现
2021/11/07 Servers
解决redis批量删除key值的问题
2022/03/23 Redis
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技