将 HR 宽度扩展到所有屏幕，忽略容器的宽度答案

【问题标题】：Extend HR width to all screen ignoring container's width将 HR 宽度扩展到所有屏幕，忽略容器的宽度
【发布时间】：2020-10-23 17:37:32
【问题描述】：

我在 50% 的宽度 div 容器内有一个 HR 元素，我希望 HR 扩展到屏幕的所有宽度，忽略它的父宽度。

我知道我可以通过在容器外部应用 HR 并使用相对位置使其移动到必须的位置来解决这个问题......但是还有其他解决方案吗？

我尝试将宽度设置为大于100%，假设300% 让它溢出，但它只会向右放大（并显示丑陋的滚动条）。

浏览器将HR 视为一个块，但我无法将其与margin: 0 auto 居中（按上述调整大小后）。

有没有办法在没有相对定位的情况下做到这一点？

【问题讨论】：

试试!important;。另请参阅link。
子元素不应该忽略容器。 !important 只有在我将两种样式应用于同一个元素时才有用

标签： html css

【解决方案1】：

您可以像这样为hr 使用负边距：

hr {
  width: 200%;
  margin-left: -50%;
}

Fiddle

注意，这些 %s 仅在其父 div 位于顶层和/或其他父级没有附加 width、padding 或 margin 时才会延伸到视口的末尾。要解决这个问题，也许可以在body 上尝试width: 9999px; margin-left: -3333px; 和overflow: hidden

【讨论】：

【解决方案2】：

我在搜索类似的东西后偶然发现了这个问题。因为（很遗憾）我没有找到针对这个问题的纯 CSS 解决方案，所以我最终使用 jQuery 来完成这项工作。

function hrExpand() {
   var windowWidth = $(window).width();
   $('hr').width(windowWidth).css('margin-left', function(){
     return '-' + ($(this).offset().left) + 'px';
   });
}

只要确保同时运行 onload 和 onresize 函数即可。

示例：http://codepen.io/anon/pen/qEOoGb

（您可以将 $('hr') 替换为 $('.content > hr') 以稍微提高性能并防止它替换页面上的所有 hr）

【讨论】：

【解决方案3】：

如果您使用正确的值，则使用相对定位无需滚动条：

div {
    width: 50%;
    min-height: 20em;
    margin: 0 auto;
}

hr {
    width: 200%;
    position: relative;
    left: -50%;
}

如果一个 div 是 50%，并且您希望 hr 是根的 100%（是 50% 的两倍），请使用 200%。对于 25% 的 div，使用 400% 的小时，等等

Demo

【讨论】：

【解决方案4】：

如果使用顺风：

<hr class="my-2 -ml-10 -mr-10"/>

我没有测试过引导程序

【讨论】：