如何阻止伪元素改变其他元素的宽度？

Question

我正在尝试将伪元素作为背景图像，它只是以文档的宽度进行裁剪。但是，当我将背景图片放入其中时，它会不断扩大文档的宽度，使其他一些 div 变得非常宽。

具体来说，您可以从屏幕截图中看到导航正在扩展其宽度以容纳伪元素的背景图像。

我的尝试：

我已经看到它完成了，但不是什么区别，因为实际伪元素中的代码是相同的。一个例子：

HTML：

    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container nav-down">
            <div class="navbar-header page-scroll">
                <a class="navbar-brand" href="/"><img src="/static/ScoopsLogo.png" alt="${out.global.siteName} Logo"></a>
                <p class="navbar-blog"><a href="https://blog.scoops.io/">Blog</a></p>
            </div>
        </div>
        <div id="scroll-progress">
            <div id="scroll-progress-bar"></div>
        </div>
    </nav>
    <section id="home">
        <div class="home-1">
          <div class="home1-1">
            <h1>Sound smart at the dinner table</h1>
            <h5>Learning made easy & fun</h5>
          </div>
        </div>
        <div class="home-lessons fade-in-up-static delay-2">
            <!-- List of Lessons -->
            <h5 class="text-center">NEW SCOOPS</h5>
            <div class="lessons-list">
            </div>
        </div>
     </section>

CSS：

.navbar {
    min-height: 50px;
    margin-bottom: 20px;
}
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.container {
    max-width: 600px;
}
.navbar-custom {
    .navbar-header {
      width: inherit;
      max-width: inherit;
    }
    .navbar-brand {
        img {
          width: auto;
          height: 100%;
        }
    }
    .navbar-blog {
      float: right;
      padding: 10px;
      margin: 3px 10px 0 0;
    }
}
.home-lessons {
    width: 100%;
    padding: 3%;
    @media (min-width: $screen-md-min) {
      margin-bottom: 20px;
      padding: 20px 40px;
    }
    h5 {
      margin-top: -100px;
    }
    &::before {
      content: '';
      background-image: url(/static/Scoops-Icons.png);
      background-size: cover;
      width: 500px;
      height: 500px;
      display: block;
      position: absolute;
      margin-left: 200px;
      margin-top: -200px;
    }
  }

Answer 1

我刚刚回答了一个与you put a bounty on over here 非常相似的问题。在这种情况下，我认为您最好的选择是对带有背景的伪元素强制设置最大宽度，或者在文档中删除 overflow-x。

下面是你的 CSS 的截图，并修复了：

.home-lessons {
    width: 100%;
    padding: 3%;
    @media (min-width: $screen-md-min) {
      margin-bottom: 20px;
      padding: 20px 40px;
    }
    h5 {
      margin-top: -100px;
    }
    &::before {
      content: '';
      background-image: url(/static/Scoops-Icons.png);
      background-size: cover;
      width: 500px;
      height: 500px;
      display: block;
      position: absolute;
      margin-left: 200px;
      margin-top: -200px;
      max-width: calc(100% - 200px); /* HERE IS THE FIX */
    }
}

如果这不起作用，快速解决办法是这样做：

html {
    overflow-x: hidden;
}

我看到有些人使用 html, body 作为他们的 CSS 选择器稍微有点过头了，这取决于你。

Answer 2

父元素应使用position: relative，而子元素应使用top: 0 和left: 0。

像这样：

.parent {
    position: relative;
}
.child {
    top: 0;
    left: 0;
}