How to implement a separator line using CSS

Here are a few simple ways to implement the separation line, personally prefer the second, I also gave the last fifth kind of comparison 2 of the wording, please make bricks, or provide other good methods.

A single label implements a divider line:

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

Pros: Simple Code

Skillfully use the background color to achieve the separation line:

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

Advantages: Simple code, adaptive width

Inline-block Implementing Divider Lines:

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

Pros: Text can be multiple lines

Floating Implementation Separator lines:

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

Advantages: NUN

To implement a separator line with characters:

<p class= "demo_line_05" > ——————————— <span> Small separator line characters to implement </span> ———————————— </p>

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

Advantages: The above is just a simple example of a few simple method of dividing line, there will certainly be a more simple and clear method, hope to help everyone.

Code concise above simple introduction of the separation line, perhaps there are other more appropriate wording, look at the environment picking it!