wordpress CSS水平标尺为全宽并调整为屏幕大小

eulz3vhy 于 2022-12-11 发布在 WordPress

关注(0)|答案(3)|浏览(152)

我真的被这个问题卡住了，基本上我正在使用WordPress，想要一条水平线穿过页面（打破内部容器）。这条线应该调整到屏幕大小，所以如果你缩小这条线应该会变长，基本上是一条无限长的线。
下面的代码是一个简单的例子：

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

这在技术上看起来很好，但问题是它会导致页面底部出现滚动条，因为宽度设置为600%
如果我将宽度设置为100%，它不会使行成为全宽，并在内部容器（大约990px）处停止。
所有我想要的是一个无限的线，将调整自己的屏幕大小，所以如果你有一个屏幕宽度为1900px的线应该是1900px等。
希望这有意义。
我的html是：

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

为了给予大家更好地了解我想要什么，请查看onlywire.com，他们有厚厚的灰色水平规则，横跨整个网站。这正是我想要做的。

wordpress

来源：https://stackoverflow.com/questions/20550503/css-horizontal-rule-to-be-full-width-adjust-to-screen-size

3条答案

按热度按时间

368yc8dk1#

你想让它离开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%硬编码，直到你得到你的容器全宽。

赞(0）回复(0）举报 2022-12-11

fcipmucu2#

尝试使用负水平边距将其强制置于周围容器之外：