摘要：
}.demo容器｛clear；｝.line-01｛margin；border top；｝.line-02span｛position；background；padding；display；｝\line-03span｛display；zoom；margin top；height；overflow；｝.line-04span｛padding；width；float；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .demo { width: 600px; } .demo-container { clear: both; padding: 30px 20px; text-align: left; margin: 0 auto; line-height: 18px; } .line-01 { 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 { 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> </head> <body> <div class="demo-container demo"> <div class="line-01">小小分隔线 单标签实现</div><br/> <div class="line-02"> <span>小小分隔线 巧用色实现</span> </div><br/> <div class="line-03"> <b></b> <span>小小分隔线 inline-block实现</span> <b></b> </div><br/> <div class="line-04"> <b></b> <span>小小分隔线 浮动来实现</span> <b></b> </div><br/> <div class="line-05">———————————<span>小小分隔线 字符来实现</span>————————————</div> </div> </body> </html>