html - 水平线和在 html、css 中编码的正确方法

Question

我需要在一些 block 之后画一条水平线，我有三种方法可以做到这一点:

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 />

3) 像after伪类一样使用它

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

哪种方式最实用？

Answer 1

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

这里是如何html5boilerplate这样做:

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}