CSS:纯css样式实现左右两侧文字中间填充点或线（仿账单报表样式），自适应

效果图：

实现原理很简单，使用flex布局，中间的填充使用border属性，看似是很多点，其实是一个盒子的border。
并且自动适应填充。

html代码：

<div class="text-container"><p class="name">交通出行</p><p class="fill"></p><p class="cost">3024元</p></div>

css代码：

.text-container{display: flex;justify-content: space-between;align-items: center;
}
.text-container p{font-size: 22px;margin-bottom: 5px;white-space: nowrap;
}
.cost{text-align: right;
}
.fill{width: 100%; height: 1px;border-top: dotted #000 2px; /* 可设置大小，查属性参数dotted可换其他样式 */margin: 0 10px; /* 用来控制文字与填充线的间隔大小 */
}

CSS:纯css样式实现左右两侧文字中间填充点或线（仿账单报表样式），自适应相关推荐

b站图片css,纯CSS打造BiliBili样式博客主题
前言一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
html 文本溢出兼容,CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）
前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻 ...
轮回眼css,纯CSS如何实现血轮眼+轮回眼特效（代码详解）
本篇文章给大家介绍一下使用纯CSS实现血轮眼+轮回眼特效的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助. 效果(完整代码在底部) 其实实现并不难,都是重复的代码比较多. 实现(可 ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
webkit内核 css,纯CSS改变webkit内核浏览器的滚动条样式
基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下: 复制代码代码如下: ::-webkit-scrollbar/*整体部分*/ { width: 10px; height:10px ...
window lcd css,纯CSS实现液晶字体效果
使用css实现液晶字体效果 /*The Digits*/.light{width:300px;background:#f4f5f7;height:60px;text-align:center; }.d ...
html三角形下拉列表,CSS—纯CSS实现三角图形（常用于带指引效果的小三角，下拉列表的小三角等）...
常用情况,如下图图片.png 图片.png CSS代码 .we-chat-info::after{ position: absolute; top: 109px; right: -8px; cont ...
纯CSS样式实现圆角边框
圆角应用的比较广泛,比如说一些说明的div,或者模块的div,圆角的button等. 公司的页面一般是用图片实现的,坑爹的是这次的图片整个边框的上面或整个都是一个图片,我现在要调整大小受到图片的限制了 ...
纯css实现文本溢出省略号，兼容（火狐，IE9，chrome）
很多业务需求下会出现文本溢出无法显示的情况,设置为显示省略号又不兼容,兼容性只能用js实现,今天介绍一种可以直接用css实现的方法.该方法兼容各大主流浏览器,除了诡异的IE低版本实现原理:盒模型浮动 ...

CSS:纯css样式实现左右两侧文字中间填充点或线（仿账单报表样式），自适应

CSS:纯css样式实现左右两侧文字中间填充点或线（仿账单报表样式），自适应相关推荐

最新文章

热门文章