Html 将HR宽度扩展到忽略容器的所有屏幕'；s宽度

我在50%宽度的

div

容器中有一个

HR

元素，我希望

HR

扩展到屏幕的所有宽度，忽略其父宽度

我知道我可以通过在容器外部应用

HR

来解决这个问题，并使用相对位置使其移动到必须移动的位置。。。但还有其他解决办法吗

我尝试将宽度设置为大于

100%

，比如说

300%

，然后让它溢出，但它只会放大到右侧（并显示一个丑陋的滚动条）

浏览器将

HR

视为一个块，但我无法使用

margin:0 auto将其居中（如上所述调整大小后）

有没有一种方法可以在没有相对定位的情况下实现这一点？
如果使用正确的值，则使用相对定位在没有滚动条的情况下工作：

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%的hr等

您可以对
hr
使用负边距，如下所示：

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


注意，这些%s仅在其父级
div
位于顶层且/或其他父级未附加
宽度
、
填充
或
边距
时才会延伸到视口的末尾。
要处理这个问题，可以尝试使用
width:9999px；左边距：-3333px和
溢出：隐藏在
正文上
在搜索类似的内容后，我偶然发现了这个问题。因为（遗憾的是）我没有找到解决这个问题的唯一CSS解决方案，所以我最终使用jQuery来完成这项工作

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

只需确保同时运行onload和onresize函数

例如：

（您可以将$（'hr'）替换为例如$（'content>hr'），以稍微提高性能并防止它替换页面上的所有hr）
如果使用tailwind：

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


我还没有测试引导程序
请尝试使用
！重要的。另请参见。不支持忽略容器的子元素！只有将两种样式应用于同一个元素时，“重要”才会有用