CSS画行内分隔线

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

1、采用display:inline-block样式

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

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

css部分：

1 div {
2             display: inline-block;
3             height:1px;
4             width:10%;
5             background:#00CCFF;
6             overflow:hidden;
7             vertical-align: middle;
8         }

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

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

css部分：

 1         .line {
 2             height:1px;
 3             border-top: solid 10px #00CCFF;
 4             text-align: center;
 5             margin-top: 10px;
 6         }
 7         .line span{
 8             position: relative;
 9             top: -20px;
10             background-color: #ffffff;
11             padding: 0 20px;
12         }

3、用一个标签来实现

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

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

css部分：

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

4、横线字符输入

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

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

css部分

1         .line {
2             letter-spacing: -1px;
3             color: #aa3333;
4         }
5         .line span{
6             letter-spacing: 0;
7             margin: 0 10px;
8             color: #000000;
9         }

5、浮动实现

float：left与margin-top联合使用

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

css部分：

 1         .box{
 2             width: 600px;
 3             overflow: hidden;
 4             zoom: 1;
 5         }
 6         .line {
 7             background-color: #0bb59b;
 8             margin-top: 10px;
 9             float: left;
10             width: 100px;
11             height: 5px;
12         }
13         .text{
14             float: left;
15             margin: 0 10px;
16         }

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

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

css部分

 1         .line{
 2             width: 600px;
 3             position: relative;
 4             text-align: center;
 5             zoom: 1;
 6         }
 7         .line span:before {
 8             content: "";
 9             width: 200px;
10             height: 20px;
11             position: absolute;
12             border-top: solid 6px #aa3333;
13             right: 0;
14             top: 7px;
15         }
16         .line span:after {
17             content: "";
18             width: 200px;
19             height: 20px;
20             position: absolute;
21             border-top: solid 6px #aa3333;
22             left: 0;
23             top:7px;
24         }

 

posted @ 2017-05-18 14:39  lulushow  阅读(9121)  评论(0)  编辑  收藏  举报