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 proof-of-concept

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/

<hr />属性样式问题

2 个答案: