Html 使最后一个菜单项的背景颜色不同，以扩展和填充空间的其余部分？

菜单背景为全屏，但菜单本身为固定宽度。最后一个菜单项的颜色不同

<div class="nav">
  <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="last"><a href="#">Last Link</a></li>
  </ul>
</div>

看起来是这样的：

但淡蓝色需要填充右侧的剩余空间，这超出了固定宽度菜单，如下所示：

---

按钮保持相同的宽度，用浅蓝色填充的新空间不应作为按钮的一部分延伸。

这可以使用添加到最后一个列表项的伪元素来完成：

.nav ul li.last {
  position: relative;
}

.nav ul li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}

下面是一个完整的工作示例（由于伪元素将溢出，无法确定剩余宽度，因此将

溢出：隐藏；

添加到导航菜单）：

.nav{
宽度：100%；
背景色：#183650；
溢出：隐藏；
}
美国海军{
显示器：flex；
证明内容：中心；
最大宽度：500px；
填充：0；
文本对齐：居中；
保证金：0自动；
}
李国荣先生{
列表样式：无；
利润率：0.10px；
}
李丽娜先生{
颜色：#FFF；
文字装饰：无；
文本转换：大写；
填充：10px0；
显示：块；
}
最后一个a{
背景色：#20bef2；
}
最后一位{
位置：相对位置；
}
最后一个：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：100%；
宽度：1000px；
身高：100%；
背景色：#20bef2；
}

这可以使用添加到最后一个列表项的伪元素来完成：

.nav ul li.last {
  position: relative;
}

.nav ul li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}

下面是一个完整的工作示例（由于伪元素将溢出，无法确定剩余宽度，因此将

溢出：隐藏；

添加到导航菜单）：

.nav{
宽度：100%；
背景色：#183650；
溢出：隐藏；
}
美国海军{
显示器：flex；
证明内容：中心；
最大宽度：500px；
填充：0；
文本对齐：居中；
保证金：0自动；
}
李国荣先生{
列表样式：无；
利润率：0.10px；
}
李丽娜先生{
颜色：#FFF；
文字装饰：无；
文本转换：大写；
填充：10px0；
显示：块；
}
最后一个a{
背景色：#20bef2；
}
最后一位{
位置：相对位置；
}
最后一个：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：100%；
宽度：1000px；
身高：100%；
背景色：#20bef2；
}

当然，如果父
ul
上有
最大宽度：500px
，这是不可能的。没有它，您只需将
flex:1
赋给
。first
和
li:last child
元素，并调整它们的
文本对齐方式和
边距。请注意，使用pseudo元素就像添加一个额外的元素，尽管我不知道您的意图是功能性的还是纯视觉的：


body{margin:0}
.导航{
背景色：#183650；
}
美国海军{
显示器：flex；
证明内容：中心；
/*最大宽度：500px*/
填充：0；
文本对齐：居中；
保证金：0；
边框：1px实心#fff；
列表样式：无；
}
李国宝：第一个孩子{
弹性：1；
文本对齐：右对齐；
}
.nav ul li：不是（最后一个孩子）{
利润率：0.10px；
}
李丽娜先生{
颜色：#FFF；
文字装饰：无；
文本转换：大写；
填充：10px0；
显示：块；
}
.最后{
弹性：1；
左边距：10px；
文本对齐：左对齐；
背景色：#20bef2；
}










当然，如果父
ul
上有
最大宽度：500px
，这是不可能的。没有它，您只需将
flex:1
赋给
。first
和
li:last child
元素，并调整它们的
文本对齐方式和
边距。请注意，使用pseudo元素就像添加一个额外的元素，尽管我不知道您的意图是功能性的还是纯视觉的：


body{margin:0}
.导航{
背景色：#183650；
}
美国海军{
显示器：flex；
证明内容：中心；
/*最大宽度：500px*/
填充：0；
文本对齐：居中；
保证金：0；
边框：1px实心#fff；
列表样式：无；
}
李国宝：第一个孩子{
弹性：1；
文本对齐：右对齐；
}
.nav ul li：不是（最后一个孩子）{
利润率：0.10px；
}
李丽娜先生{
颜色：#FFF；
文字装饰：无；
文本转换：大写；
填充：10px0；
显示：块；
}
.最后{
弹性：1；
左边距：10px；
文本对齐：左对齐；
背景色：#20bef2；
}










bit hacky，但我会在最后一个li上使用after：bit hacky，但我会在最后一个li上使用after：这是可行的，但什么是
width:1000px你到底做什么？如果屏幕超过该值怎么办？这只是一个很大的值，以确保它覆盖整个区域。没有办法计算这个宽度，所以我把它设为1000px。它可以很容易地改成3000px，4000px或者其他任何东西。溢出将在菜单边缘停止。这是可行的，但什么是
width:1000px你到底做什么？如果屏幕超过该值怎么办？这只是一个很大的值，以确保它覆盖整个区域。没有办法计算这个宽度，所以我把它设为1000px。它可以很容易地改成3000px，4000px或者其他任何东西。溢出将在菜单边缘停止。