如何阻止僞元素改變其他元素的寬度？

Question

我試圖把一個僞元素作爲背景圖像，只是在文檔的寬度裁剪。但是，當我將背景圖像放入其中時，會不斷擴大文檔的寬度，使其他div變得非常寬泛。

具體來說，您可以從截圖中看到，nav正在擴展其寬度以適應僞元素的背景圖像。

我嘗試：

我見過它做，但我不同的是沒有什麼，因爲在實際的僞元素的代碼是一樣的。舉個例子：

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; 
}