水平线和正确的方式来编码html,css

Question

我需要在一些块之后绘制一条水平线,我有三种方法可以做到:

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>

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

Answer 2

我会去语义标记,使用<hr/>.

除非它只是你想要的边框,否则你可以使用填充,边框和边距的组合来获得所需的边界.

`<hr>`是有效的HTML5.它用于表示水平规则,但现在以语义术语定义为内容之间的主题中断.除非另有说明,否则大多数浏览器仍会将其显示为水平线.资料来源:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr (8认同)

Answer 3

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

所以在定义之后,我更愿意 <hr>

Answer 4

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}

<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

Answer 5

如果你真的想要一个主题中断,一定要使用<hr>标签.

如果你只想要一个设计线,你可以使用类似css类的东西

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

并使用它

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

Answer 6

我想要一个像线一样的长破折号，所以我用了这个。

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>