Html 如何装饰 <hr/> 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8005782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to decorate an <hr/> tag
提问by John Assymptoth
I want to have an horizontal ruler with the following characteristics:
我想要一个具有以下特征的水平尺：
align:left
noshade
size:2
width:50%
color:#000000
If the above attributes were not deprecated, I would use:
如果上述属性没有被弃用，我会使用：
<hr size="2" width="50%" noshade style="color:#000000" align="left" />
I'm now thinking of using the style attribute only. Are there any tricks to make the HR render the same in several browsers?
我现在只想使用 style 属性。有什么技巧可以使 HR 在多个浏览器中呈现相同的效果吗？
EDIT:
编辑：
From the answers, I remade my <hr />tag to:
根据答案，我将<hr />标签重新制作为：
<hr style='background-color:#000000;border-width:0;color:#000000;height:2px;line-height:0;text-align:left;width:50%;'/>
However, in Firefox, the text-align:leftproperty seems to have no effect, as the horizontal rule appears centred. It works fine in Opera and IE, though. I experimented my code here:
然而，在 Firefox 中，text-align:left属性似乎没有效果，因为水平线显示居中。不过，它在 Opera 和 IE 中运行良好。我在这里试验了我的代码：
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_test
Any trick to make it left-aligned?
有什么技巧可以让它左对齐？
回答by Salman A
In 2015, most browsers seem to render HRas a block element with zero height and 1px inset border. You can change the properties like this:
在 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;">回答by BMFredrick
To answer your question:
回答你的问题：
"Any trick to make it left-aligned?"
“有什么技巧可以让它左对齐？”
I would just add 'display: inline-block;' to the style attribute in your previous code. Your completed code would look like this:
我只想添加 '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%;' />
I tested this in Chrome, IE, and Firefox, and it worked in each. Further documentation and browser compatibility can be found here: CSS2 - The Display Declaration
我在 Chrome、IE 和 Firefox 中对此进行了测试，并且在每种情况下都有效。可以在此处找到更多文档和浏览器兼容性：CSS2 - 显示声明
On a side note, it would be best to add this style to an external or internal style sheet instead of adding it inline. This way, you can have a standardized hr element for your entire website, and it keeps your style declarations separate from your document layout.
附带说明一下，最好将此样式添加到外部或内部样式表，而不是内联添加。通过这种方式，您可以为整个网站使用标准化的 hr 元素，并将您的样式声明与文档布局分开。
回答by BMFredrick
Why not make a picture, then type this code into CSS???
为什么不做个图片，然后把这段代码输入到 CSS 中？？？
hr {
height:43px; /*(image height)*/
width:50%;
background-image:url("hr-tag-image.png"); /*Your image file*/
/*Demo: https://heckles.typrograms.com */
}
