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

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

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

前端知識學習交流158565420驗證碼：4

學習咨詢q2189877100

總結

以上是生活随笔為你收集整理的巧用CSS实现分隔线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。