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