文章/答案/技术大牛

发布

问如何装饰<hr/>标签
EN

Stack Overflow用户

提问于 2011-11-04 06:50:33

回答 3查看 102.8K关注 0票数 13

我想要一个具有以下特点的水平尺：

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

如果不建议使用上述属性，我将使用：

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

我现在只考虑使用样式属性。有什么技巧可以让HR在多个浏览器中呈现相同的外观吗？

编辑：

根据答案，我将我的<hr />标记重做如下：

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

然而，在火狐中，text-align:left属性似乎没有任何效果，因为水平规则似乎以中心。不过，它在Opera和IE中运行得很好。我在这里实验了我的代码：

测试

有什么办法让它向左排列吗？

css

xhtml

html

回答 3

Stack Overflow用户

发布于 2011-11-04 07:57:54

在2015年，大多数浏览器似乎将HR呈现为零高度和1 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;">

票数 10

Stack Overflow用户

发布于 2012-07-12 21:54:20

回答你的问题：

“有什么办法让它向左排列吗？”

我只想在前面代码中的样式属性中添加'display: inline；‘。完成的代码如下所示：

<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元素，并将您的样式声明与文档布局分开。

票数 5

Stack Overflow用户

发布于 2015-07-31 06:52:28

为什么不画一张图片，然后将这些代码输入CSS？

            hr {
        height:43px; /*(image height)*/
        width:50%;
    background-image:url("hr-tag-image.png"); /*Your image file*/
/*Demo: https://heckles.typrograms.com */
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8005782

复制

相似问题

问如何装饰<hr/>标签
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何装饰<hr/>标签EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何装饰<hr/>标签
EN