將元素延伸到容器之外，但將子代保留在容器中

Question

我最近遇到了一個問題，我想將所有內容保留在父容器中，但我希望導航背景為頁面寬度的100％。 我嘗試過的方法在使導航寬度為頁面寬度的100％方面起作用，但是現在ul內部不受容器的影響，這正是我最初想要的。

我通過在導航中使用另一個容器div使其起作用，但是我覺得這是一個臨時的方法。

關於如何使父容器影響導航中的ul的任何建議？

HTML：

<div class="container">
  <nav class="menu">
    <div class="container">
    <ul>
      <li><a href="#view1">HOME</a></li>
      <li><a href="#view2">ABOUT ME</a></li>
      <li><a href="#view3">SERVICES</a></li>
      <li><a href="#view4">CURRENT PROJECT</a></li>
      <li><a href="#view5">PORTFOLIO</a></li>
      <li><a href="#view6">CONTACT ME</a></li>
    </ul>
    </div>
  </nav>
</div>

CSS：

.container {
    margin: 0 auto;
    width: 1200px;
}

.menu {
    left: 0;
    right: 0;
    height: 80px;
    position: fixed;
    background-color: rgb(33, 33, 33);
}

.menu ul {
    padding: 0;
    margin: 0;
    color: #fff;
    list-style: none;
    font-weight: bold;
    height: 80px;
    float: right;
}

.menu ul li {
    display: inline-block;
    padding-right: 50px;
}

Answer 1

您可以使用:before或:after偽選擇器來創建看起來像width等於頁面width的背景效果。

 body { overflow: hidden; width: 100%; margin: 0; } .container { max-width: 1200px; margin: 0 auto; } .menu { height: 80px; position: relative; } .menu:before { background-color: rgb(33, 33, 33); position: absolute; right: -9999px; left: -9999px; content: ''; z-index: -1; bottom: 0; top: 0; } .menu ul { padding: 0; margin: 0; color: #fff; list-style: none; font-weight: bold; float: right; } .menu ul li { display: inline-block; padding-right: 50px; } .menu ul li a { color: #fff; } 

 <div class="container"> <nav class="menu"> <ul> <li><a href="#view1">HOME</a></li> <li><a href="#view2">ABOUT ME</a></li> <li><a href="#view3">SERVICES</a></li> <li><a href="#view4">CURRENT PROJECT</a></li> <li><a href="#view5">PORTFOLIO</a></li> <li><a href="#view6">CONTACT ME</a></li> </ul> </nav> </div>