html - <hr> 属性样式问题

Question

我的网站有一个包含以下 CSS 代码的容器 div

.container {
    width: 1020px;
    background-color:transparent;
    margin: 0 auto;
}

并且它具有固定宽度，如上所示。在容器中，有一个导航栏和中间的一个部分，我正在使用 <hr>属性以便将它们分开，但我遇到的问题是，即使我给这个 hr 100% 的宽度，它也只会适合我的容器的宽度，但我希望它扩展到整个页面。

有什么办法可以管理吗？提前致谢。

Answer 1

当给定相对大小时，元素的宽度是相对于其父元素的。在这种情况下，就无法让 hr 元素的 width 相对于另一个父元素。

不过，您可以指定大于 100% 的宽度，然后根据需要使用负边距居中:

​div {
    width: 50%;
    margin: 0 auto;
    border: 1px solid #f90;
}

​div hr {
    width: 190%;
    margin-left: -45%;
}​

<div id="a">
    <hr />
</div>​

JS Fiddle proof-of-concept .