以符合HTML5的方式将<hr>左对齐

Question

目前,我正在使用

<hr align="left" />

在我的HTML5页面上,但我已经读过在XHTML 4.01中弃用了align属性,并且据说从HTML5中删除了.我想使用CSS而不是像这样的内联属性,但是当我尝试时

hr{align: left; max-width: 800px;}

或hr{text-align: left;}或hr{left: 0;}或hr{float: left;},它只是在中心出现了.

那么我应该使用什么而不是上面的内联属性？

Answer 1

一种选择是将左边距设置为零:

hr{max-width: 800px; margin-left:0;}

Answer 2

你试图以一种方式使用某种东西(正如Eliezer Bernart所提到的那样......显然,与MDN文档链接的评论消失了)不再"以这种方式工作".你可以,只要你不介意它在IE中搞砸,只需将边距设置为零 - http://jsfiddle.net/s52wb/

hr {
    max-width: 100px;
    margin: 0px;
}

更好的想法是在不使用人力资源的情况下,通过CSS模仿人力资源的旧方式.查看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;
}

Answer 3

我不知道被用于一些上述的答案是什么浏览器,但我发现没有text-align:left,也没有margin-left:0在IE(11,标准模式,HTML5)和Firefox(29)工作.

• IE11:text-align:left工作,margin-left:0以规则为中心.

• FF:margin-left:0工作,text-align:left以规则为中心.

• 所以,要么使用两者,要么我发现margin-right:100%两者都适用!