html - 属性样式问题

Question

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

.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 概念验证。

Answer 2

我认为在这种情况下，最好不要在容器上设置宽度或边距，而是在内容本身上设置。如果您在该容器内有一个简单的 HTML 结构，那么应该很简单。

HTML

<div id="container">
    <p>Lorem ipsum dolor sit amet</p>
    <hr>
    <p>Lorem ipsum dolor sit amet</p>
    <hr>
    <p>Lorem ipsum dolor sit amet</p>
    <hr>
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS

#container p { width: 500px; margin: 0 auto; }

http://jsfiddle.net/cEGNb/1/