如何使 <hr> 充满整个宽度？

Question

我想让这个<hr>标签横跨整个父容器的宽度。我已经尝试添加margin-left/padding-right属性，但在响应式布局下会改变。

.single-article .article-container-inner {
    background: #f0eded;
    border: 1px solid #c9c7c7;
    padding: 20px;
    margin-bottom: 20px;
}
.single-article hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
    width:100%
}

<div class="article-container single-article">
    <div class="article-container-inner">
        <hr>
    </div>
</div>

这也可以在http://jsfiddle.net/bh2f6/1/找到。

有更好的解决方案吗？

编辑：我无法编辑父容器的填充，因为这对于许多其他元素是必需的。

- user3187469

---

这是许多例子之一，向我展示了CSS的可怕之处。 - clankill3r

Answer 1

你在父元素上使用的 padding 和给 <hr /> 设定的 width:100%; 导致了一些问题。 <hr /> 默认会横跨整个屏幕，不需要设定 width:100%，所以删掉它。然后为了补偿 padding，只需给 <hr /> 添加同样的负 margin 即可。

将你的 CSS 修改为如下：

.single-article hr {
    margin: 30px -20px 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
}

点击查看jsFiddle演示

- Code Maverick

Answer 2

类似这样的东西可能会起作用...

hr {
  padding: 50px 0;
  border: none;

  &:before {
    // full-width divider
    content: "";
    display: block;
    position: absolute;
    right: 0;
    max-width: 100%;
    width: 100%;
    border: 1px solid grey;
  }
}

http://codepen.io/achisholm/pen/ZWNwmG

- Alistair Chisholm

Answer 3

HR秘密，你必须知道。

当你的水平线 (hr) 左右两侧留有15像素时，可能是在使用bootstrap时出现的。

<hr class="my-hr-line">

.my-hr-line {
    position: relative;
    left: -15px;
    width: calc(100% + 30px);
    height: 2px;
    border: 2px solid blue;
}

希望这能对很多人有所帮助。

- ArifMustafa

Answer 4

去除填充应该适用于您

工作示例

.single-article .article-container-inner {
    background: #f0eded;
    border: 1px solid #c9c7c7;
    margin-bottom: 20px;
}
.single-article hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #c9c7c7;
    width:100%
}

- Jatin

---

不，我不能编辑父容器的填充，因为这对其他许多元素是必需的。 - user3187469

Answer 5

你是说像这样吗？

Fiddle

只需将填充更改为padding: 20px 0;

- Sebsemillia

---

不，我不能编辑父容器的填充，因为这对其他许多元素是必需的。 - user3187469

我明白了。那么你应该查看 Code Maverick 的答案。它可以保留填充 ;) - Sebsemillia