css分割线

在网站建设中尝尝会遇到这样那样的分割线，比如：分割线————————     --------分割线----------  等等，这些分割线用css怎么实现呢，下面就给大家介绍一些常用方法

一、利用相对定位是文字的位置相对原来的位置移动

demo1；

.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;}

<div class="demo_line_02"><span>分割线</span></div>

调整.demo_line_02里的text-align值可以实现

以上三种样式的分割线

二、利用border属性

demo:

.demo_line_01{padding: 0 20px 0;margin: 20px 0;line-height: 1px;height:1px;border-left: 400px solid #ddd;border-right: 200px solid #ddd;text-align: center;}

<div class="demo_line_02"><span>分割线</span></div>

三、利用inline-block实现，这种方法文字部分可以换行

demo：

.demo_line_03{width:800px;}
.demo_line_03 b{background: #ccc;margin-top: 4px;display: inline-block;width: 200px;height: 1px;_overflow: hidden;vertical-align: middle;}
.demo_line_03 span{display: inline-block;width: 200px;vertical-align: middle;}

<div class="demo_line_03"><b></b><span>分割线分割线分割线分割线分割线分割</span><b></b></div>

 

 

 

转载于:https://www.cnblogs.com/hongsemantuoluo/archive/2012/07/17/2595256.html