如何从父 CSS 中排除元素答案

【问题标题】：How to exclude element from parent CSS如何从父 CSS 中排除元素
【发布时间】：2014-10-27 16:18:29
【问题描述】：

我有一个问题，要让 HR 元素忽略它所在的 div 中的填充。它有一个填充：padding:0 20px 0 20px;，但这会影响我喜欢的标题和文本。但我想将 HR 标签用作 100% 的分隔符。

看起来像这样：

*------------*
| Header tag |
| ---------- |
| some text  |
| some text  |
*------------*

但是我怎样才能让它像这样工作：

*------------*
| Header tag |
+------------+
| some text  |
| some text  |
*------------*

因此 HR 元素的实际宽度为 100%，因此不包括填充。

有什么建议吗？

【问题讨论】：

【解决方案1】：

通过使用负边距，与填充一样多。

在此 HTML 代码中：

<div>
    Text
    <hr />
    Text
</div>

使用这个 CSS：

div {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
}
hr {
    margin-left: -10px;
    margin-right: -10px;
}

另见demo。

【讨论】：