css画行内分隔线

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

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

1、采用display:inline-block样式

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

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

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

 1 <div class="line">
 2     <span>小小分隔线 字符来实现</span>
 3 </div>
 4 .line {
 5     height:1px;
 6     border-top: solid 10px #00CCFF;
 7     text-align: center;
 8     margin-top: 10px;
 9 }
10 .line span{
11     position: relative;
12     top: -20px;
13     background-color: #ffffff;
14     padding: 0 20px;
15 }

3、用一个标签来实现

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

 1 <div class="line">
 2     <span>小小分隔线 字符来实现</span>
 3 </div>
 4 .line {
 5     margin: 40px 0;
 6     line-height: 1px;
 7     border-left: solid 100px #00CCFF;
 8     border-right: solid 100px #00CCFF;
 9     text-align: center;
10 }

4、横线字符输入

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

 1  <div class="line">
 2      —————————————<span>小小分隔线 字符来实现</span>——————————
 3 </div>
 4 .line {
 5     letter-spacing: -1px;
 6     color: #aa3333;
 7 }
 8 .line span{
 9     letter-spacing: 0;
10     margin: 0 10px;
11     color: #000000;
12 }

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>
 6 .box{
 7     width: 600px;
 8     overflow: hidden;
 9     zoom: 1;
10 }
11 .line {
12     background-color: #0bb59b;
13     margin-top: 10px;
14     float: left;
15     width: 100px;
16     height: 5px;
17 }
18 .text{
19     float: left;
20     margin: 0 10px;
21 }

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

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

猜你喜欢