我需要在某个块后画一条水平线，有三种方法可以做到：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>