Html 以符合 HTML5 的方式将 <hr> 向左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20724891/
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
Align <hr> to the left in an HTML5-compliant way
提问by Chris Middleton
Currently, I'm using
目前，我正在使用
<hr align="left" />
on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried
在我的 HTML5 页面上，但我读到 align 属性在 XHTML 4.01 中已被弃用，并且据称已从 HTML5 中删除。我想使用 CSS 而不是这样的内联属性，但是当我尝试
hr{align: left; max-width: 800px;}
or hr{text-align: left;}or hr{left: 0;}or hr{float: left;}, it just showed up in the center.
or hr{text-align: left;}or hr{left: 0;}or hr{float: left;}，它只是出现在中心。
So what should I use instead of the inline attribute above?
那么我应该使用什么来代替上面的 inline 属性呢？
采纳答案by Stephen
You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN docdisappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/
您正在尝试以某种方式使用某些东西（正如 Eliezer Bernart 所提到的……并且显然带有指向MDN 文档的链接的评论消失了）不再“以这种方式工作”。你可以，只要你不介意它在 IE 中很糟糕，只需将边距设置为零 - http://jsfiddle.net/s52wb/
hr {
max-width: 100px;
margin: 0px;
}
A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/for a demo:
一个更好的主意是在不使用 HR 的情况下通过 CSS 模仿 HR 的旧做事方式。查看http://jsfiddle.net/p5ax9/1/的演示：
p:first-child:before {
display: none;
}
p:before {
content: " ";
border: 1px solid black;
margin-top: 15px;
margin-bottom: 15px;
display: block;
max-width: 100px;
}
回答by matt
One option would be to set the left margin to zero:
一种选择是将左边距设置为零：
hr{max-width: 800px; margin-left:0;}
回答by JonBrave
I don't know what browsers were used for some above answers, but I found neither text-align:leftnor margin-left:0worked in both IE (11, Standards mode, HTML5) and Firefox (29).
我不知道上面的一些答案使用了什么浏览器，但我发现既没有text-align:left也没有margin-left:0在 IE（11，标准模式，HTML5）和 Firefox（29）中工作。
IE11:
text-align:leftworks,margin-left:0leaves rule centred.FF:
margin-left:0works,text-align:leftleaves rule centred.So, either use both, orI found that
margin-right:100%works for both!
IE11：
text-align:left有效，margin-left:0以规则为中心。FF：
margin-left:0有效，text-align:left以规则为中心。所以，要么同时使用，要么我发现
margin-right:100%两者都适用！
回答by Art
You can use div tag instead.
您可以改用 div 标签。
<div style="border: thin solid lightgray; width: 100px;"></div>
回答by CRABOLO
do this
做这个
hr {
display: inline; //or inline-block
text-align: left;
}
