当前位置: 首页 > Web前端 > CSS

在文本行的中间,CSS巧妙的实现了几种分隔行的方法

时间:2023-03-31 12:51:45 CSS

单个标签实现分隔线:.demo_line_01{padding:020px0;margin:20px0;line-height:1px;border-left:200pxsolid#ddd;border-right:200pxsolid#ddd;text-align:center;}优点:代码简洁巧妙利用背景色实现分隔线:.demo_line_02{height:1px;border-top:1pxsolid#ddd;text-align:center;}.demo_line_02span{position:relative;top:-8px;background:#fff;padding:020px;}优点:代码简洁,宽度可适配inline-block实现分割线:点此查看示例display.demo_line_03{宽度:600px;}.demo_line_03b{背景:#ddd;边距-顶部:4px;显示:内联块;宽度:180px;高度:1px;_overflow:隐藏;垂直对齐:中间;}.demo_line_03span{显示:inline-block;width:220px;vertical-align:middle;}优点:文本可以多行浮动,实现分隔线:.demo_line_04{width:600px;}.demo_line_04{overflow:hidden;_zoom:1;}。demo_line_04b{background:#ddd;margin-top:8px;float:left;width:26%;height:1px;_overflow:hidden;}优点:NUN使用字符实现分隔符:——————————————小分隔符实现————————————

.demo_line_05{letter-spacing:-1px;color:#ddd;}.demo_line_05span{letter-spacing:0;color:#222;margin:020px;}优点:代码简洁以上简单介绍了分割线的写法,可能还有其他合适的写法,视环境需要吧!