Question

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

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

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

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

有没有办法在没有相对定位的情况下实现这个目标？

Answer 1

您可以使用hr的负余量，如下所示：

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

Fiddle

注意，如果其父级div位于顶层且/或其他父级没有width，padding，则这些％s只会延伸到视口末尾margin附上。要解决此问题，可以在width: 9999px; margin-left: -3333px;上尝试overflow: hidden和body

Answer 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

（您可以使用例如$（＆＃39; .content＆gt; hr＆＃39;）替换$（＆＃39; hr＆＃39;）以提高性能并防止其替换所有小时在你的页面上）

Answer 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％hr等

Demo

Answer 4

如果顺风顺水：

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

我还没有测试过引导程序

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

4 个答案: