Question

我有一个固定宽度的容器来集中一些内容：

.container {
    width: 1000px;
    margin: auto;
}

<div class="container">
    content…
</div>

现在我想在内容中创建一个水平规则：

<div class="container">
    <p>Content foo…</p>
    <hr>
    <p>Content bar…</p>
</div>

我喜欢跨越整个页面的规则，而不仅仅是容器。我可以通过将<hr>元素拉出容器来实现：

<div class="container">
    <p>Content foo…</p>
</div>
<hr>
<div class="container">
    <p>Content bar…</p>
</div>

有没有办法让<hr>跨越整个页面宽度而不将其从容器中取出？

Answer 1

我看到的唯一方法就是将hr从流文档中取出：

hr {
    position:absolute;
    width:100%;
    left:0;
    border-left:0;
    border-right:0;
}

选中 Demo Fiddle

Answer 2

显然，自然的答案是改变你布置容器的方式但是回答问题时你可以使用position: absolute然后使用CSS相邻的兄弟选择器+添加一些在它离开流程后的小时空间。

http://jsfiddle.net/w248Y/1/

HTML

<div class="container">
    <p>Content foo…</p>
    <hr/>
    <p>Content bar…</p>
</div>

CSS

.container {
    width: 400px;
    margin: auto;
}

p {
    margin: 0;
    padding: 0;
}

hr {
    left: 0;
    margin: 1em 0 0;
    position: absolute;
    width: 100%;
}

hr + * {
    /*Doube the hr margin for even layout */
    margin-top: 2em;
}

Answer 3

<强> CSS ：

.container {
     width: 100%;
     margin: auto;
}
.container p {
    width:1000px;
}

<强> HTML ：

<div class="container">
     <p>Content foo…</p>
     <hr>
     <p>Content bar…</p>
</div>

Answer 4

简短的回答是否定的......没有简单的方法。实现您想要实现的目标的最简单方法是简单地将每个P包装在自己的容器中，并使用每个容器外部的HR。 http://jsfiddle.net/eEM5G/如果这有助于你，请告诉我。

<div class="container">
    <p>Content foo…</p>
</div>
<hr>
<div class="container">
    <p>Content foo…</p>
</div>


.container {
    width: 1000px;
    margin: auto;
}

我怎样才能轻易地从包装容器中脱出？

4 个答案: