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所提到的那样......显然，与the MDN doc的链接的评论消失了）不再“以这种方式工作”。你可以，只要你不介意它在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

我不知道哪些浏览器用于上述某些答案，但我发现IE（11，标准模式，HTML5）和Firefox（29）都没有text-align:left和margin-left:0。

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 {
   display: inline;  //or inline-block
   text-align: left;
}

Answer 6

.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" />

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

6 个答案: