CSS画行内分隔线

为行内元素画长宽可变化的居中分隔线

1、采用display:inline-block样式

这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.

<p><div></div>lalalalalala<div></div></p>

css部分：

div {
            display: inline-block;
            height:1px;
            width:10%;
            background:#00CCFF;
            overflow:hidden;
            vertical-align: middle;
        }

2、如果要做的网页背景色是纯色的话可以用这个方法来实现，代码很简洁，并且宽度可以自适应显示。这个方法主要就是设置文字的背景来盖住文字所在部分的线。

<div class="line">
    <span>小小分隔线 字符来实现</span>
</div>

css部分：

        .line {
            height:1px;
            border-top: solid 10px #00CCFF;
            text-align: center;
            margin-top: 10px;
        }
        .line span{
            position: relative;
            top: -20px;
            background-color: #ffffff;
            padding: 0 20px;
        }

3、用一个标签来实现

其中，line-height来控制分割线的粗细，border-left与border-right的线条宽度控制分割线的左、右width.

<div class="line">
    <span>小小分隔线 字符来实现</span>
</div>

css部分：

        .line {
            margin: 40px 0;
            line-height: 1px;
            border-left: solid 100px #00CCFF;
            border-right: solid 100px #00CCFF;
            text-align: center;
        }

4、横线字符输入

直接在代码中用输入法打入——就可以了，也是比较简洁的实现方式，宽度与高度不可控。

<div class="line">
    —————————————<span>小小分隔线 字符来实现</span>——————————
</div>

css部分

        .line {
            letter-spacing: -1px;
            color: #aa3333;
        }
        .line span{
            letter-spacing: 0;
            margin: 0 10px;
            color: #000000;
        }

5、浮动实现

float：left与margin-top联合使用

<div class="box">
    <span class="line"></span>
    <span class="text">小小分隔线 字符来实现</span>
    <span class="line"></span>
</div>

css部分：

        .box{
            width: 600px;
            overflow: hidden;
            zoom: 1;
        }
        .line {
            background-color: #0bb59b;
            margin-top: 10px;
            float: left;
            width: 100px;
            height: 5px;
        }
        .text{
            float: left;
            margin: 0 10px;
        }

6、伪类before、after与绝对定位

<div class="line">
    <span>小小分隔线</span>
</div>

css部分

        .line{
            width: 600px;
            position: relative;
            text-align: center;
            zoom: 1;
        }
        .line span:before {
            content: "";
            width: 200px;
            height: 20px;
            position: absolute;
            border-top: solid 6px #aa3333;
            right: 0;
            top: 7px;
        }
        .line span:after {
            content: "";
            width: 200px;
            height: 20px;
            position: absolute;
            border-top: solid 6px #aa3333;
            left: 0;
            top:7px;
        }