html - 水平线和在 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>

哪种方式最实用？

score 163 · Accepted Answer

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;
}

score 67 · Accepted Answer

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

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

score 12 · Accepted Answer

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

score 11 · Accepted Answer

在 HTML5 中，<hr>标签定义了一个主题中断。在 HTML 4.01 中， <hr>标签代表水平线。

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

score 11 · Accepted Answer

如果您真的想要主题休息，请务必使用<hr>标签。

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

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

并像使用它一样

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

score 6 · Accepted Answer

我想要一条长划线，所以我用了这个。

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

}

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

score 1 · Accepted Answer

我的简单解决方案是使用 css 设置 hr 样式，使其具有零顶部和底部边距、零边框、1 像素高度和对比背景颜色。这可以通过直接设置样式或定义类来完成，例如：

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

score 1 · Accepted Answer

这取决于要求，但许多开发人员的建议是使您的代码尽可能简单。因此，请使用简单的“hr”标签和 CSS 代码。

score 0 · Accepted Answer

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

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

强调文本

score 0 · Accepted Answer

这是一个相对简单的例子，对我有用。

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

10 回答 10