Html 如何使 <hr> 全宽？

How to make <hr> full width?

提问by user3187469

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

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).

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

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.

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

采纳答案by Code Maverick

Your width:100%;on the <hr />and the paddingon 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 />.

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

Change your CSS to this:

将您的 CSS 更改为：

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

See working jsFiddle demo

参见工作 jsFiddle 演示

回答by Alistair Chisholm

Something like this might work...

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

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

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

回答by Jatin

Removing Padding should work for you

删除填充应该对你有用

Working Example

工作示例

.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%
}

回答by ArifMustafa

HRSecret things, you must know.

HR秘密的事情，你一定要知道。

When your horizontal rule(hr)leaves 15px from left and right, probably when you use with bootstrap.

当您的horizontal rule(hr)从左到右离开 15px 时，可能是在您使用 with 时bootstrap。

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

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

Hope it will help many one.

希望它会帮助很多人。

回答by Sebsemillia

You mean like this?

你的意思是这样？

Fiddle

小提琴

just change the padding to padding: 20px 0;

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