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

Question

目前，我正在使用

<hr align="left" />

在我的 HTML5 页面上，但我读到 align 属性在 XHTML 4.01 中已被弃用，并且应该从 HTML5 中删除。我想使用 CSS 而不是像这样的内联属性，但是当我尝试

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

或 hr{text-align: left;} 或 hr{left: 0;} 或 hr{float: left;} ，它刚刚出现在中心。

那么我应该使用什么来代替上面的内联属性呢？

原文由 Chris Middleton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在尝试以某种方式使用某些东西（正如 Eliezer Bernart 提到的那样……并且显然带有 MDN 文档链接的 评论消失了）不再“以这种方式工作”。你可以，只要你不介意它在 IE 中很麻烦，只需将边距设置为零 - http://jsfiddle.net/s52wb/

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

一个更好的主意是模仿 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;
}

原文由 Stephen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 matt 发布，翻译遵循 CC BY-SA 3.0 许可协议