如何使用CSS實現分隔線

下面是幾種簡單實現分隔線的方法，個人比較喜歡第二種，我也給出了最後第五種比較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

利用字元實現分隔線：

<p class="demo_line_05">———————————<span>小小分隔線 字元來實現</span>————————————</p>

.demo_line_05{    letter-spacing: -1px;    color: #ddd;}.demo_line_05 span{    letter-spacing: 0;    color: #222;    margin:0 20px;}

優點：以上只是簡單例舉了幾個簡單的分隔線方法，以後肯定還會有更加簡單明了的方法，希望可以幫到大家。

代碼簡潔 以上簡單介紹了分隔線的寫法，也許還有其它比較合適的寫法，看環境各取所需吧！