http://jsfiddle.net/bh2f6/1/
我想这个< hr />所以它将拉伸整个宽度,直到其父容器的边缘.我已经尝试添加margin-left / padding-right来克服这个问题,但是在调整大小(响应)时它会不断变化.
有更好的解决方案吗？
编辑：我无法编辑父容器的填充,因为它是一堆其他元素所需要的.
解决方法
你的宽度：100％;在< hr />上并且父母的填充物搞砸了. < hr />自然地横跨屏幕延伸,不需要宽度：100％,所以将其移除.然后为了补偿填充,只需向< hr />添加相同的负边距.
将CSS更改为：
.single-article hr {
margin: 30px -20px 20px;
border: 0;
border-top: 1px solid #c9c7c7;
}
