html - 居中左边距但右边距 100% 的视口(viewport)(到最后)

Question

我一直面临一个我发现难以解决的问题。

基本上，我希望 div 从 margin 0 auto 的左侧位置开始，并在视口(viewport)边缘结束。请参阅下图以帮助说明这一点。

HTML 的基本部分是这样的......

<div style="max-width:500px; margin: 0 auto;">
  <div> <!-- needs to start at left margin and stretch to 100% of viewport -->
    <ul>
     <li></li>
    </ul>
   </div>
</div>

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

是的，这是完全可以实现的。但是，在使用 calc 之前，请记住它是 CSS 3 并随 some usability limitations 一起提供。 (没有 IE8，没有 Opera Mini)。

.container {
  max-width: 500px;
  margin: 0 auto;
}
.container > div {
  margin-top: 20px;
  min-height: 200px;
  background-color: #ccc;
}
.container > div > ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
.container > div > ul > li {
  padding: 10px;
  list-style-type: none;
}
.container > div > ul > li:nth-child(2) {
  width: calc(((100vw - 100%) / 2) + 100%);
  background-color: red;
  min-height: 30px;
  color: white;
  box-sizing: border-box;
  text-align: right;
}

<div class="container">
  <div>
    <!-- needs to start at left margin and stretch to 100% of viewport -->
    <ul>
      <li>first li</li>
      <li>second li</li>
    </ul>
  </div>
</div>

大部分 CSS 是为了让它看起来像您的图片。但是模型是:

.grand-parent {
    width: {some-fixed-width}; // 500px in our case
    margin: 0 auto;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}
.parent {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.child {
    width: calc(((100vw - 100%) / 2) + 100%);
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

其中一些甚至没有出现在我上面的代码中，因为它们是默认值，但它们对于它的工作很重要。如果您决定在父级上使用一些填充，则必须在子级中补偿它，无论是在 calc 中(100% 变为 100% + left-padding of parent + right-padding-of-parent) 和左边距(negative left margin of parent)。但是，为了简单起见，不要在父级上使用左右边距或填充。 :))

jsFiddle here .