Question

我真的坚持这个，基本上我使用的是wordpress，并且想要一条水平线穿过页面（突破内部容器）。这条线应该调整到屏幕尺寸，所以如果你缩小线条应该继续变长，基本上是一条无限线。

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

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

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

如果我将宽度设置为100％，则不会使线条全宽并且在内部容器中将其停止，大约为990px。

我想要的只是一条无限的线条，可以根据屏幕尺寸调整自己，所以如果你的屏幕宽度为1900像素，那么这条线应该是1900像素等。

希望这是有道理的。

我的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％硬编码，直到你的容器全宽。

Answer 2

尝试使用负水平边距强制它在周围容器之外：

hr {
    margin: 20px -10000px;
}

为避免水平滚动条将其添加到正文：

body {
overflow-x: hidden;
}

如果您只想将其应用于特定的水平标尺，请将其添加为类。

<强> HTML：

  <hr class="full">

样式表：

 hr.full {
 margin: 20px -10000px;
 }

Answer 3

您应该将身体的填充和边距设置为0：

body{
  padding: 0;
  margin: 0;
}

CSS水平规则为全宽和＆amp;调整到屏幕大小

3 个答案: