css - 如何使ul中的最后一个 child 扩展到浏览器的剩余宽度

Question

我有三个列表项，每个列表项都有特定的颜色，并且它们向左浮动。容器中的 ul。我需要 ul 中的最后一个 child 扩展到所有尺寸的浏览器的剩余宽度。

.my-list li:first-child:before{
        content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  right: 100%;
  top: 0;
  background-color: inherit;
}
.my-list li:last-child:after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 100%;
  top: 0;
  background-color: inherit;
}

<ul class="my-list">
  <li><a href="#">first list item</a></li>
  <li><a href="#">Second list item</a></li>
  <li><a href="#">Third list item</a></li>
</ul>
    

Answer 1

Flexbox 可以用伪元素做到这一点。

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-X: hidden; /* no nasty scrollbar */
}
.container {
  width: 60%;
  margin: auto;
  border:1px solid red;
}
.my-list {
  display: flex;
  list-style: none;
}
li {
  padding: 0 1em;
  background: pink;
}
.my-list li:last-child {
  flex: 1;
  background: lightgreen;
  position: relative;
}
.my-list li:last-child:after {
  content: "";
  background: inherit;
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 100%;
}

<div class="container">
  <ul class="my-list">
    <li><a href="#">first list item</a>
    </li>
    <li><a href="#">Second list item</a>
    </li>
    <li><a href="#">Third list item</a>
    </li>
  </ul>

</div>