html在div中加分割线,[CSS]几种实现分割线的方法

HTML结构

小小分隔线 单标签实现

小小分隔线 巧用色实现

小小分隔线 inline-block实现

小小分隔线 浮动来实现

——————————— 小小分隔线 字符来实现————————————

对应的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}