CSS水平规则为全宽并调整为屏幕尺寸

Question

我真的坚持这个，基本上我使用的是 wordpress，并且想要一条水平线穿过页面(突破内部容器)。这条线应该适应屏幕大小，所以如果你缩小，这条线应该会越来越长，基本上是一条无限长的线。

到目前为止，我设法做的是以下代码:

.horizontalrule1 {
    position:relative;
    height:82px;
    background: #f1f2f2;
    overflow:hidden;
    width:600%;
    margin-left: -100%;
}

这在技术上看起来不错，但问题是它导致滚动条出现在页面底部，因为宽度设置为 600%

如果我将宽度设置为 100%，它不会使线条全宽并在大约 990 像素的内部容器处停止。

我想要的只是一条无限线，它会根据屏幕尺寸自行调整，所以如果你的屏幕宽度为 1900px，则该线应该为 1900px 等。

希望这是有道理的。

我的 html 是:

<div class="horizontalrule1"></div>

为了让大家更好地了解我想要什么，请查看 onlywire.com , 它们具有横跨整个站点的粗灰色水平规则。这正是我想要做的。

Answer 1

你想让它在 DOM 元素之外吗？

.elementContainingYourHorizontalRule {
    overflow: auto; /* or whatever, just don't set it to hidden. */
    position: relative;
}

.horizontalrule1 {
    position: absolute;
    width: 600%;
    left: 50%;
    margin-left: -300%;
    height: 2px; /* or whatever. */
}

我不知道这是否是最好的做事方式——如果我是你，我会让你的包含元素占据页面的整个宽度，让你的自定义 HR 自动完成它自己的事情。我知道这可能不适用于您的设计/布局。

无论如何，如果您不为容器提供完整的宽度，您的水平线将永远无法知道您的页面宽度。因此，在您获得容器全宽之前，您将陷入丑陋的 600% 硬编码。