CSS a variety of ways to implement the separation line detailed explanation

This article describes how CSS implementation of the separation line of the various methods, we write the front page when the separation line can play a beautiful role, CSS implementation of the separation line method has a variety of methods, then we will look at the use of CSS how to achieve the separation line more beautiful view!

A single label implements a divider line:

Html:

<p class= "line_01" > Small Divider single label implementation </p>

Css:

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

Advantages : Simple Code

Skillfully use the background color to achieve the separation line:

Html:

<p class= "line_02" ><span> small divider line for the use of color </span></p>

Css:

. 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:

Html:

<p class= "line_03" ><b></b><span> small divider Inline-block Implementation </span><b></b>< /p>

Css:

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

Floating Implementation Separator lines:

Html:

<p class= "line_04" ><b></b><span> small divider floating to achieve </span><b></b></p>

Css:

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

To implement a separator line with characters:

Html:

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

Css:

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

Advantages: The code is simple above the description of the separation line, perhaps there are other more appropriate wording, look at the environment picking it!
Only by contrast can you find out who is better, and you can do it all over again, and make a comparison!

Related recommendations:
CSS how to set the separation line and double solid line

How to implement a separator line using CSS