为行内元素画长宽可变化的居中分隔线
1、采用display:inline-block样式
这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.
1 <p><div></div>lalalalalala<div></div></p>
css部分：
1 div { 2 display: inline-block; 3 height:1px; 4 width:10%; 5 background:#00CCFF; 6 overflow:hidden; 7 vertical-align: middle; 8 }
2、如果要做的网页背景色是纯色的话可以用这个方法来实现，代码很简洁，并且宽度可以自适应显示。这个方法主要就是设置文字的背景来盖住文字所在部分的线。
1 <div class="line"> 2 <span>小小分隔线 字符来实现</span> 3 </div>
css部分：
1 .line { 2 height:1px; 3 border-top: solid 10px #00CCFF; 4 text-align: center; 5 margin-top: 10px; 6 } 7 .line span{ 8 position: relative; 9 top: -20px; 10 background-color: #ffffff; 11 padding: 0 20px; 12 }
3、用一个标签来实现
其中，line-height来控制分割线的粗细，border-left与border-right的线条宽度控制分割线的左、右width.
1 <div class="line"> 2 <span>小小分隔线 字符来实现</span> 3 </div>
css部分：
1 .line { 2 margin: 40px 0; 3 line-height: 1px; 4 border-left: solid 100px #00CCFF; 5 border-right: solid 100px #00CCFF; 6 text-align: center; 7 }
4、横线字符输入
直接在代码中用输入法打入——就可以了，也是比较简洁的实现方式，宽度与高度不可控。
1 <div class="line"> 2 —————————————<span>小小分隔线 字符来实现</span>—————————— 3 </div>
css部分
1 .line { 2 letter-spacing: -1px; 3 color: #aa3333; 4 } 5 .line span{ 6 letter-spacing: 0; 7 margin: 0 10px; 8 color: #000000; 9 }
5、浮动实现
float：left与margin-top联合使用
1 <div class="box"> 2 <span class="line"></span> 3 <span class="text">小小分隔线 字符来实现</span> 4 <span class="line"></span> 5 </div>
css部分：
1 .box{ 2 width: 600px; 3 overflow: hidden; 4 zoom: 1; 5 } 6 .line { 7 background-color: #0bb59b; 8 margin-top: 10px; 9 float: left; 10 width: 100px; 11 height: 5px; 12 } 13 .text{ 14 float: left; 15 margin: 0 10px; 16 }
6、伪类before、after与绝对定位
1 <div class="line"> 2 <span>小小分隔线</span> 3 </div>
css部分
1 .line{ 2 width: 600px; 3 position: relative; 4 text-align: center; 5 zoom: 1; 6 } 7 .line span:before { 8 content: ""; 9 width: 200px; 10 height: 20px; 11 position: absolute; 12 border-top: solid 6px #aa3333; 13 right: 0; 14 top: 7px; 15 } 16 .line span:after { 17 content: ""; 18 width: 200px; 19 height: 20px; 20 position: absolute; 21 border-top: solid 6px #aa3333; 22 left: 0; 23 top:7px; 24 }
查看更多关于【css教程】的文章
