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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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中的内存管理问题
2011/08/31 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
python文件操作整理汇总
2014/10/21 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python区块及区块链的开发详解
2019/07/03 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python操作redis数据库的三种方法
2020/09/10 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
2014幼儿园家长工作总结
2014/11/10 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
抢劫罪辩护词
2015/05/21 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
nginx七层负载均衡配置详解
2022/07/15 Servers