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 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
BootStrap中
2016/12/10 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
vue filters的使用详解
2018/06/11 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
浅谈Python peewee 使用经验
2017/10/20 Python
python enumerate函数的使用方法总结
2017/11/15 Python
基于python实现KNN分类算法
2020/04/23 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
python定时截屏实现
2020/11/02 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
你常见到的runtime exception
2016/09/05 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
给孩子的新年寄语
2014/04/08 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
坎儿井导游词
2015/02/09 职场文书
地道战观后感
2015/06/04 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA