Html 用于水平换行的 HTML5 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27215472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 tag for horizontal line break
提问by Willman
I did already find a post about using the <hr>tag to insert a line break, but when I looked up the tag on the w3 website (http://www.w3schools.com/tags/tag_hr.asp) it says that all attributes of the tag are not supported in HTML5. Obviously I want to make my website HTML5 compatible, so what would be the best way to insert a visible horizontal line?
我确实已经找到了一篇关于使用<hr>标签插入换行符的帖子，但是当我在 w3 网站（http://www.w3schools.com/tags/tag_hr.asp）上查找标签时，它说HTML5 不支持该标签。显然我想让我的网站兼容 HTML5，那么插入可见水平线的最佳方法是什么？
Thanks
谢谢
回答by Thaum Rystra
You can still use <hr>as a horizontal line, and you probably should. In HTML5 it defines a thematic break in content, without making any promises about how it is displayed. The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
您仍然可以将其<hr>用作水平线，而且您可能应该这样做。在 HTML5 中，它定义了内容的主题中断，但不对其显示方式做出任何承诺。HTML5 规范中不支持的属性都与标签的外观有关。外观应该在 CSS 中设置，而不是在 HTML 本身中设置。
So use the <hr>tag without attributes, then style it in CSS to appear the way you want.
所以使用<hr>没有属性的标签，然后在 CSS 中设置样式以显示您想要的方式。
回答by shuboy2014
Simply use hrtag in HTMLfile and add below code in CSSfile .
只需在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;
}
it works perfectly .
它工作得很好。
回答by Adam Howard
You can make a div that has the same attributes as the <hr>tag. This way it is fully able to be customized. Here is some sample code:
您可以制作一个与<hr>标签具有相同属性的 div 。通过这种方式，它完全可以进行定制。下面是一些示例代码：
The HTML:
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>
The CSS:
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;
}
To see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/
要查看项目的结果，这里是上述代码的 JSFiddle：http: //jsfiddle.net/SplashHero/qmccsc06/1/
回答by James Wu
Instead of using <hr>, you can one of the border of the enclosing block and display it as a horizontal line.
您可以不使用 <hr>，而是将封闭块的边框之一显示为水平线。
Here is a sample code:
这是一个示例代码：
The HTML:
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>
The CSS:
CSS：
.title_block {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}
回答by edo
I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing. Try this code: use ::before or ::after
我回答这个老问题只是因为它仍然出现在谷歌查询中，我认为缺少一个最佳答案。试试这个代码： 使用 ::before 或 ::after
