以符合 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;}

，它只是出现在中心。

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

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 模仿 HR 的旧做事方式，而不使用 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;
}

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%

  对两者都适用！

Answer 4

您可以使用 div 标签代替。

<div style="border: thin solid lightgray; width: 100px;"></div>

Answer 5

<hr>

标签的

margin-inline-start

和

margin-inline-end

属性设置为

auto

，使元素水平居中（类似于将元素的左右边距设置为自动）。

要左对齐

hr

标签，您可以将

margin-inline-start

设置为 0:

hr {
    margin-inline-start: 0;
}

...您可以通过将

hr

设置为 0:

 来右对齐 

margin-inline-end

标签

hr {
    margin-inline-end: 0;
}

Answer 6

这样做

hr {
   display: inline;  //or inline-block
   text-align: left;
}

Answer 7

这工作正常：

hr id="" style="text-align:left;margin-left:0"

有一个好的代码！

Answer 8

.line {
    height: 2px;
    background-color: var(--itemBorder);
    color: var(--itemBorder);
}
.width100 {
    width: 100% !important;
}
.width90 {
    width: 90% !important;
}
.width80 {
    width: 80% !important;
}
.width70 {
    width: 70% !important;
}
.width60 {
    width: 60% !important;
}
.width50 {
    width: 50% !important;
}
.width40 {
    width: 40% !important;
}
.width30 {
    width: 30% !important;
}
.width20 {
    width: 20% !important;
}
.width10 {
    width: 10% !important;
}

<div class="line width100" />