css分隔线怎么实现

图标

豆瓜

豆瓜网

豆瓜网专栏

首发
豆瓜 图标 2020-03-19 11:53:25

巧用背景色实现分隔线:

.demo_line_02{    height: 1px;    border-top: 1px solid #ddd;    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: #ddd;    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;
}

优点:文字可多行


本文由豆瓜网专栏作家 豆瓜 投稿发布,并经过豆瓜网编辑审核。

转载此文章须经作者同意,并附上出处(豆瓜网)及本页链接。

若稿件文字、图片、视频等内容侵犯了您的权益,请联系本站进行 投诉处理

相关搜索

分隔线
图标 图标

豆瓜

豆瓜网

豆瓜网专栏

全部评论

豆瓜

豆瓜网

豆瓜网专栏

  • 日本花王纸尿裤怎么样
  • volte是什么意思,手机怎么开启volte
  • 华为在英宣布两千万英镑投资计划,拥有7200...
  • 从空调能效标识区分空调耗电能量
  • 马云的hhb酒吧被网友调侃为还花呗
  • 我来说两句