原文地址：http://www.daqianduan.com/4258.html
前幾天一@同事看新浪微博里有個類似分隔線的提示，就自己試了幾種方法來實現這個分隔線。下面就是簡單實現分隔線的幾種方法，個人比較喜歡第二種，我也給出了最后第五種比較2的寫法，請大家拍磚，或者提供其他好的方法。
單個標簽實現分隔線：
.demo_line_01{
padding: 0 20px 0;
margin: 20px 0;
line-height: 1px;
border-left: 200px solid #ddd;
border-right: 200px solid #ddd;
text-align: center;
}
優點：代碼簡潔
巧用背景色實現分隔線：
.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;
}
優點：文字可多行
浮動實現分隔線：
.demo_line_04{
width:600px;
}
.demo_line_04{
overflow: hidden;
_zoom: 1;
}
.demo_line_04 b{
background: #ddd;
margin-top: 8px;
float: left;
width: 26%;
height: 1px;
_overflow: hidden;
}
優點：NUN
利用字符實現分隔線：
<div class="demo_line_05">———————————<span>小小分隔線 字符來實現</span>————————————</div>
.demo_line_05{
letter-spacing: -1px;
color: #ddd;
}
.demo_line_05 span{
letter-spacing: 0;
color: #222;
margin:0 20px;
}
優點：代碼簡潔 以上簡單介紹了分隔線的寫法，也許還有其它比較合適的寫法，看環境各取所需吧！
<html><head> <meta charset="UTF-8"> <title>實例: CSS巧妙實現分隔線的幾種方法 -- 大前端</title> </head> <body>
<h1 class="demo-title">實例: CSS巧妙實現分隔線的幾種方法 -- 大前端</h1> <div class="demo-header"> « CSS巧妙實現分隔線的幾種方法 </div> <div class="demo-container demo">
<style type="text/css"> .demo{ width: 600px; } .line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-align: center; } .line_02{ height: 1px; border-top: 1px solid #ddd; text-align: center; } .line_02 span{ position: relative; top: -12px; background: #fff; padding: 0 20px; } .line_03{ width:600px; } .line_03 b{ background: #ddd; margin-top: 4px; display: inline-block; width: 180px; height: 1px; _overflow: hidden; vertical-align: middle; } .line_03 span{ display: inline-block; width: 220px; vertical-align: middle; text-align: center; } .line_04{ width:600px; } .line_04{ overflow: hidden; _zoom: 1; } .line_04 b{ background: #ddd; margin-top: 12px; float: left; width: 26%; height: 1px; _overflow: hidden; } .line_04 span{ padding: 0 10px; width: 32%; float: left; text-align: center; } .line_05{ letter-spacing: -1px; color: #ddd; } .line_05 span{ letter-spacing: 0; color: #222; margin:0 20px; } </style> <div class="line_01">小小分隔線 單標簽實現</div> <br> <br> <div class="line_02"><span>小小分隔線 巧用色實現</span></div> <br> <br> <div class="line_03"><b></b><span>小小分隔線 inline-block實現</span><b></b></div> <br> <br> <div class="line_04"><b></b><span>小小分隔線 浮動來實現</span><b></b></div> <br> <br> <div class="line_05">———————————<span>小小分隔線 字符來實現</span>————————————</div> <br> <br> </div> </body></html>