html - 当 设置为 90% margin 0 auto 时，如何使 水平跨越视口(viewport)？

Question

到目前为止，我根本无法做到这一点，而且我已经研究了很多方法，但我似乎没有运气......

我的 HTML 是

  <div>
    <ul>
      <li>
    </ul>
  </div>

  <div>
   <ul>
      <li>
    </ul>
  </div>

</div>
</body>

我的 CSS 是

body {
  padding: 0;
  margin: 0 auto;
  width: 90%;
}

.navbar {
  background-color: lightgrey;
  overflow: hidden;
  padding: 0.5rem;
}

如何让 .navbar 水平跨越 100% 的视口(viewport)，同时将其中的元素保持在页面 90% 的宽度范围内？

Answer 1

使用视口(viewport)单位，在本例中为视口(viewport)宽度 vw，您可以为 fullwidth 设置负边距以将其移动到左边缘

并使用container，不要将body设置为小于视口(viewport)的宽度

body {
  margin: 0;
}

.container {
  margin: 0 auto;
  width: 90vw;

  /* just for demo purpose */
  background-color: red;
  padding-top: 20px;
}

.fullwidth {
  width: 100vw;
  margin-left: -5vw;              /*  move it to the edge  */
  background-color: lightgrey;
  overflow: hidden;
  padding: 0.5rem;
  box-sizing: border-box;
}

<div class="container">

  <div class="fullwidth">
    <div>
      <ul>
        <li>LI
      </ul>
    </div>

    <div>
      <ul>
        <li>LI
      </ul>
    </div>

  </div>

</div>