How to implement dividers using CSS

The following are several simple ways to implement dividing lines. Personally, I prefer the second one. I also gave the final fifth way of writing 2. Please help me or provide other good methods.

A single label to realize the dividing 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;
}

Advantages: The code is concise

The background color is cleverly used to realize the dividing 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: The code is concise and can Adaptive width

inline-block realizes the dividing line:

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

Advantages: text can be multi-line

Floating realizes the dividing line:

.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

Use characters to implement separation lines:

<p class="demo_line_05">———————————<span>小小分隔线 字符来实现</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 are just a few simple examples of separation line methods. There will definitely be more simple and clear methods in the future. I hope it can help. Everyone.

The code is concise. The above is a brief introduction to the writing method of dividing lines. There may be other more suitable ways of writing. You can choose what you need depending on the environment!

The above is the detailed content of How to implement dividers using CSS. For more information, please follow other related articles on the PHP Chinese website!