css画行内分隔线

内容取自：https://www.cnblogs.com/lulushow/p/6873278.html

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

1、采用display:inline-block样式

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

<p><div></div>lalalalalala<div></div></p>
div {
    display: inline-block;
    height:1px;
    10%;
    background:#00CCFF;
    overflow:hidden;
    vertical-align: middle;
}

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

<div class="line">
    <span>小小分隔线 字符来实现</span>
</div>
.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>
.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>
.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>
.box{
     600px;
    overflow: hidden;
    zoom: 1;
}
.line {
    background-color: #0bb59b;
    margin-top: 10px;
    float: left;
     100px;
    height: 5px;
}
.text{
    float: left;
    margin: 0 10px;
}

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

<div class="line">
    <span>小小分隔线</span>
</div>
.line{
     600px;
    position: relative;
    text-align: center;
    zoom: 1;
}
.line span:before {
    content: "";
     200px;
    height: 20px;
    position: absolute;
    border-top: solid 6px #aa3333;
    right: 0;
    top: 7px;
}
.line span:after {
    content: "";
     200px;
    height: 20px;
    position: absolute;
    border-top: solid 6px #aa3333;
    left: 0;
    top:7px;
}