如何使<hr>全宽？

Question

我想这样<hr/>做,它将拉伸整个宽度,直到其父容器的边缘.我已经尝试添加margin-left/padding-right来克服这个问题,但是在调整大小时(响应)会不断变化.

有更好的解决方案吗？

编辑:我无法编辑父容器的填充,因为它是一堆其他元素所需要的.

Answer 1

你width:100%;在<hr />和padding父被搞乱的东西了.将<hr />在屏幕上自然延伸,并不需要width:100%,因此将其删除.然后为了补偿填充,只需添加相同的负边距<hr />.

将CSS更改为:

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