如何使< hr>全屏宽度？

问题描述

我想让这个< hr /> ，所以它会拉伸整个宽度，直到其父容器的边缘。我已经尝试添加margin-left / padding-right来克服这个问题，但是它在调整大小（响应）时不断变化。

有更好的解决方案吗？ >

编辑：我无法编辑父容器的填充，因为需要其他元素。

解决方案

< hr /> 上的 width：100％; padding 上的父母都搞乱了。 < hr /> 自然会跨越屏幕，不需要 width：100％它。然后为了补偿填充，只需向< hr /> 添加相同的负边距。

将CSS更改为：

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

http://jsfiddle.net/bh2f6/1/

I want to make this <hr/> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).

Is there a better solution for this?

Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.

解决方案

Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.

Change your CSS to this:

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

See working jsFiddle demo

这篇关于如何使< hr>全屏宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！