我需要在某个块后画一条水平线,有三种方法可以做到:1)定义一个 h_line 类并向其添加 css 特性,如#css.hline { width:100%; height:1px; background: #fff...
我需要在某个块后画一条水平线,有三种方法可以做到这一点:
1)定义一个类 h_line
并向其添加 CSS 特性,例如
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2)使用 hr
标签
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
伪类 after
一样使用它
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
哪种方式最实用?
居中线,中间有文本,使用上边距和下边距:
.lineL {
width: calc(32vw - 24px);
margin-right:2vw;
margin-bottom:5px;
height: 0;
border: 1px solid #a5a5a5;
display:inline-block;
}
.lineR {
width: calc(32vw - 24px);
margin-left:2vw;
margin-bottom:5px;
height: 0;
border: 1px solid #a5a5a5;
display:inline-block;
}
.line {
margin-bottom:40px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:calc(70vw - 24px);
}
<html>
<body>
<button>Login</button>
<div class="line">
<div class="lineL"></div>
<div style="display:inline-block;width:24px;">OR</div>
<div class="lineR"></div>
</div>
<button>Logout</button>
</body>
</html>