3

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

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

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

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

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

4

4 回答 4

8

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

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

小提琴

div请注意，这些 %s 仅在其父级位于顶层和/或没有其他父级具有width、padding或margin附加的情况下才会延伸到视口的末尾。为了解决这个问题，也许可以尝试 awidth: 9999px; margin-left: -3333px;和 anoverflow: hiddenbody

于 2012-12-30T15:25:37.153 回答
1

在搜索了类似的东西后，我偶然发现了这个问题。因为（可悲）我没有找到解决这个问题的纯 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）

于 2014-12-02T22:47:19.343 回答
0

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

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 等

演示

于 2012-12-30T15:06:52.197 回答
0

如果使用顺风：

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

我还没有测试过引导程序

于 2020-10-23T09:37:32.957 回答