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

Question

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

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

我尝试将宽度设置为大于 100%，比如说 300% 并让它溢出，但它只会向右放大(并显示一个丑陋的滚动条).

浏览器将 HR 视为一个 block ，但我无法使用 margin: 0 auto 将其居中(按上述方式调整大小后)。

有没有办法不用相对定位就可以做到这一点？

Answer 1

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

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

Fiddle

请注意，如果其父 div 处于顶层且/或没有其他父级具有 width，则这些 %s 只会延伸到视口(viewport)的末尾，padding，或附加 margin。要处理这个问题，也许可以尝试 width: 9999px; margin-left: -3333px; 和 body

上的 overflow: hidden