文字在线中间，CSS巧妙实现分隔线的几种方法

CODING 发布于2019-08-29 15:24 / 1263人阅读

摘要：单个标签实现分隔线优点代码简洁巧用背景色实现分隔线优点代码简洁，可自适应宽度实现分隔线点此查看实例展示优点文字可多行浮动实现分隔线优点利用字符实现分隔线小小分隔线字符来实现优点代码简洁以上简单介绍了分隔线的

单个标签实现分隔线：

.demo_line_01{

padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ffffd;
border-right: 200px solid #ffffd;
text-align: center;

}
优点：代码简洁

巧用背景色实现分隔线：

.demo_line_02{

height: 1px;
border-top: 1px solid #ffffd;
text-align: center;

}
.demo_line_02 span{

position: relative;
top: -8px;
background: #fff;
padding: 0 20px;

}
优点：代码简洁，可自适应宽度

inline-block实现分隔线：

点此查看实例展示

.demo_line_03{

width:600px;

}
.demo_line_03 b{

background: #ffffd;
margin-top: 4px;
display: inline-block;
width: 180px;
height: 1px;
_overflow: hidden;
vertical-align: middle;

}
.demo_line_03 span{

display: inline-block;
width: 220px;
vertical-align: middle;

}
优点：文字可多行

浮动实现分隔线：

.demo_line_04{

width:600px;

}
.demo_line_04{

overflow: hidden;
_zoom: 1;

}
.demo_line_04 b{

background: #ffffd;
margin-top: 8px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;

}
优点：NUN

利用字符实现分隔线：

———————————小小分隔线字符来实现————————————

.demo_line_05{

letter-spacing: -1px;
color: #ffffd;

}
.demo_line_05 span{

letter-spacing: 0;
color: #222;
margin:0 20px;

}
优点：代码简洁以上简单介绍了分隔线的写法，也许还有其它比较合适的写法，看环境各取所需吧！

GPU云服务器云服务器 js缓存的几种方法最基本的几种 html的几种轮播一段巧妙的css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113296.html

文字在线中间，CSS巧妙实现分隔线的几种方法

摘要：单个标签实现分隔线优点代码简洁巧用背景色实现分隔线优点代码简洁，可自适应宽度实现分隔线点此查看实例展示优点文字可多行浮动实现分隔线优点利用字符实现分隔线小小分隔线字符来实现优点代码简洁以上简单介绍了分隔线的 showImg(https://segmentfault.com/img/bVbaGqW?w=766&h=442);单个标签实现分隔线： .demo_line_01{ paddin...

hosition 2019-08-02 10:27 评论0 收藏0
HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 评论0 收藏0
HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

iliyaku 2019-08-02 11:21 评论0 收藏0
2016百度前端技术学院Task02

摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

venmos 2019-08-30 13:19 评论0 收藏0
2016百度前端技术学院Task02

摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

lolomaco 2019-08-01 16:09 评论0 收藏0