下面是幾種簡(jiǎn)單實(shí)現(xiàn)分隔線的方法，個(gè)人比較喜歡第二種，我也給出了最后第五種比較2的寫(xiě)法，請(qǐng)大家拍磚，或者提供其他好的方法。

單個(gè)標(biāo)簽實(shí)現(xiàn)分隔線：

?

點(diǎn)此查看實(shí)例展示

?

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

優(yōu)點(diǎn)：代碼簡(jiǎn)潔

巧用背景色實(shí)現(xiàn)分隔線：

?

點(diǎn)此查看實(shí)例展示

?

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

優(yōu)點(diǎn)：代碼簡(jiǎn)潔，可自適應(yīng)寬度

inline-block實(shí)現(xiàn)分隔線：

?

點(diǎn)此查看實(shí)例展示

?

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

優(yōu)點(diǎn)：文字可多行

浮動(dòng)實(shí)現(xiàn)分隔線：

?

點(diǎn)此查看實(shí)例展示

?

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

優(yōu)點(diǎn)：NUN

利用字符實(shí)現(xiàn)分隔線：

?

點(diǎn)此查看實(shí)例展示

?

<div class="demo_line_05">———————————<span>小小分隔線 字符來(lái)實(shí)現(xiàn)</span>————————————</div> .demo_line_05{letter-spacing: -1px;color: #ddd; } .demo_line_05 span{letter-spacing: 0;color: #222;margin:0 20px; }

優(yōu)點(diǎn)：以上只是簡(jiǎn)單例舉了幾個(gè)簡(jiǎn)單的分隔線方法，以后肯定還會(huì)有更加簡(jiǎn)單明了的方法，希望可以幫到大家。

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

前端知識(shí)學(xué)習(xí)交流158565420驗(yàn)證碼：4

學(xué)習(xí)咨詢q2189877100

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。