Question

我确实找到了一篇关于使用<hr>标记插入换行符的帖子，但是当我在w3网站（http://www.w3schools.com/tags/tag_hr.asp）上查找标记时，它表示标记的所有属性HTML5不支持。显然我想让我的网站HTML5兼容，那么插入可见水平线的最佳方法是什么？

由于

Answer 1

你仍然可以使用<hr>作为水平线，你可能应该这样做。在HTML5中，它定义了内容中的主题中断，而没有对其显示方式做出任何承诺。 HTML5规范中不支持的属性都与标记的外观相关。外观应该在CSS中设置，而不是在HTML本身中设置。

因此，请使用不带属性的<hr>标记，然后在CSS中设置样式以显示您想要的方式。

Answer 2

只需在 HTML 文件中使用 hr 标记，然后在 CSS 文件中添加以下代码。

    hr {
       display: block;
       position: relative;
       padding: 0;
       margin: 8px auto;
       height: 0;
       width: 100%;
       max-height: 0;
       font-size: 1px;
       line-height: 0;
       clear: both;
       border: none;
       border-top: 1px solid #aaaaaa;
       border-bottom: 1px solid #ffffff;
    }

效果很好。

Answer 3

您可以创建一个与<hr>标记具有相同属性的div。这样它完全可以定制。以下是一些示例代码：

HTML：

<h3>This is a header.</h3>
<div class="customHr">.</div>

<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>

CSS：

.customHr {
    width: 95%
    font-size: 1px;
    color: rgba(0, 0, 0, 0);
    line-height: 1px;

    background-color: grey;
    margin-top: -6px;
    margin-bottom: 10px;
}

要了解项目的结果，这里有一个JSFiddle用于上面的代码：http://jsfiddle.net/SplashHero/qmccsc06/1/

Answer 4

不是使用＆lt; hr＆gt;，而是可以使用封闭块的边框之一并将其显示为水平线。

以下是示例代码：

HTML：

<div class="title_block">
    <h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>

CSS：

.title_block {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

Answer 5

我正在回答这个老问题，因为它仍然出现在谷歌查询中，我认为缺少一个最佳答案： 使用::之前或::之后

请参阅Align <hr> to the left in an HTML5-compliant way

用于水平换行符的HTML5标记

5 个答案:

HTML：

CSS：