如何装饰<hr />标签

Question

我想要一个具有以下特征的水平标尺:

align:left
noshade
size:2
width:50%
color:#000000

如果上面的属性没有被弃用,我会使用:

<hr size="2" width="50%" noshade style="color:#000000" align="left" />

我现在只考虑使用style属性.是否有任何技巧可以使HR在多个浏览器中呈现相同的效果？

---

编辑:

从答案中,我将我的<hr />标记重新制作为:

<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>

但是,在Firefox中,text-align:left属性似乎没有效果,因为水平规则显示为居中.但它在Opera和IE中运行良好.我在这里试验了我的代码:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test

任何让它左对齐的技巧？

Answer 1

在2015年,大多数浏览器似乎呈现HR为具有零高度和1px插入边框的块元素.您可以更改这样的属性:

p { font: italic large serif; text-align: center; }

<p>hr size="2" color="palevioletred" width="50%" align="left"</p>
<hr style="border: 1px solid palevioletred; 
           margin-right: 50%;           ">

<p>hr size="2" color="palevioletred" width="50%" align="right"</p>
<hr style="border: 1px solid palevioletred; 
           margin-left: 50%;">

<p>hr size="1" color="palevioletred" width="50%" align="center"</p>
<hr style="border-width: 1px 1px 0;
           border-style: solid;
           border-color: palevioletred; 
           width: 50%;
           margin-left: auto;
           margin-right: auto;">

Answer 2

回答你的问题：

“有什么技巧可以让它左对齐？”

我只想添加 'display: inline-block;' 到之前代码中的 style 属性。您完成的代码如下所示：

<hr style = 'background-color:#000000; border-width:0; color:#000000; height:2px; lineheight:0; display: inline-block; text-align: left; width:50%;' />

我在 Chrome、IE 和 Firefox 中对此进行了测试，并且在每种情况下都有效。可以在此处找到更多文档和浏览器兼容性：CSS2 - 显示声明

附带说明一下，最好将此样式添加到外部或内部样式表，而不是内联添加。通过这种方式，您可以为整个网站使用标准化的 hr 元素，并将您的样式声明与文档布局分开。