CSS cleverly implements divider lines

Single label Implementation separator 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

Background color for dividing lines

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

 .demo_line_04  { width : 600px ;} .demo_line_04  { overflow :  hidden ;  _zoom :  1 ;} .demo_line_04 b  { background :  #ddd ;  Margin-top :  8px ;  float :  left ; :  26% ; :  1px ;  _overflow :  hidden ;} 

Using characters to implement divider lines

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

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

Pros: Simple Code

Above turned arrogant front end: http://www.daqianduan.com/4258.html

There is also a way to use the fieldset tag implementation:

Html:

<form class= "Form" >    <fieldset class= "fieldset" >        <legend class= "Legend" ><a href= "#" > People who may be interested </a></legend>        <div class= "Btns" >            <a href= "#" > More </a><a href= "# ">111</a>        </div>    </fieldset></form>

Css:

. Form{margin:10px Auto;width:800px}. FieldSet{Border-width:1px 0 0;Border-color:#ccc;Border-style:Solid;Padding-left:30px;}. Legend{padding:0 5px;}. Btns{padding:0 5px;float: Right;margin:-18px 10px 0 0;background:#fff;_position:relative}. Btns a{Border-radius:5px;Border:1px solid #CCC;padding:3px 7px;margin:0 2px;background:#fff;Display:Inline-block;}

@

CSS cleverly implements divider lines