水平线和正确的方式来编码在HTML，CSS

我需要在一些块之后画出一条水平线，我有三种方法来做到这一点：

1）定义一个类h_line并添加cssfunction，像

 #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）像使用伪类一样使用它

 #css .hline:after { width:100%; height:1px; background: #fff; content:"" } #html <div class="block_1 h_line">Lorem</div>

哪种方式最实用？

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

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

我会去语义标记，使用<hr/> 。

除非它只是你想要的边界，那么你可以使用填充，边框和边距的组合来获得所需的边界。

在HTML5中， <hr>标签定义了一个主题中断。在HTML 4.01中， <hr>标记表示一个水平的规则。

所以定义之后，我更喜欢<hr>

如果你真的想要一个主题rest ，通过一切手段使用<hr>标签。

如果你只是想要一个devise线，你可以使用像CSS类的东西

 .hline-bottom { padding-bottom: 10px; border-bottom: 2px solid #000; /* whichever color you prefer */ }

并使用它

 <div class="block_1 hline-bottom">Cheese</div>

我简单的解决scheme是样式人力资源与CSS具有零顶部和底部边距，零边框，1像素高度和对比的背景颜色。这可以通过直接设置样式或通过定义类来完成，例如：

 .thin_hr { margin-top:0; margin-bottom:0; border:0; height:1px; background-color:black; }

这取决于需求，但很多开发人员的build议是尽可能简化代码。所以，请使用简单的“hr”标签和CSS代码。