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％的视口，同时保持其中的元素在页面的90％宽度内？

Answer 1

使用视口单位，在本例中为视口宽度vw，您可以在其中为fullwidth提供负边距以将其移至左边缘

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

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>

Answer 2

将正文设置为100％，然后使用90％的包装div。不要将主体设置为90％

body {
  padding: 0;
  margin: 0 auto;
}

.navbar {
  background-color: lightgrey;
  overflow: hidden;
  padding: 0.5rem;
}

.wrapper { padding: 20px 0; width: 90%; margin:0 auto; background: #aaa; }

<div class="navbar">Nav Items</div>
<div class="wrapper">
  
  Content
  </div>

当设置为90％margin 0 auto时，如何在视口中水平设置<div>范围？

2 个答案: