Question

我有三个列表项，每个列表项具有特定的颜色，它们浮动到左侧。容器中的ul。我需要ul中的最后一个子节点扩展到所有大小的浏览器的剩余宽度。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

这样的东西？

  .my-list li:last-child{
  width: 100%;
  background-color: initial;
}

您可以更改背景颜色以使其正常工作

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

2 个答案: