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;
}

<强> See working jsFiddle demo

Answer 2

删除填充应该适合你

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

Answer 3

这样的事可能有用......

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

Answer 4

你的意思是这样吗？

Fiddle

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

Answer 5

HR ，您必须知道。

当您的horizontal rule （小时）离开左右15像素时，可能是与bootstrap一起使用时。

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

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

希望它将对很多人有帮助。

如何使<hr />全宽？

5 个答案: