做最后一个 li 块直到药丸结束答案

【问题标题】：Make last li block until the end of pills做最后一个 li 块直到药丸结束
【发布时间】：2016-02-06 12:10:50
【问题描述】：

所以我有这样的设计：

还有我的html：

<div id="tabs-profile">
        <ul class="nav nav-pills uppercase bold">
          <li class="active"><a data-toggle="pill" href="#portfolio">portfolio</a></li>
          <li><a data-toggle="pill" href="#info">info</a></li>
          <li><a data-toggle="pill" href="#recommendation">recommendation</a></li>
        </ul>
      </div><!-- tabs-profile -->

还有我的 CSS：

.nav-pills>li>a{
padding: 10px 35px;
border-radius: 0;
color: #fff;}

.nav-pills{
padding: 5px 0 0;
background-color: #f8e713;}

问题：

如何使最后一个具有背景颜色的li 活动时直到navpills 结束？

【问题讨论】：

你能解释一下你实际需要什么吗？
所以我有 3 个选项卡，就像 tha 图像一样，我想让最后一个选项卡的背景颜色一直阻塞到 nav-pill 结束。 as you can see when portfolio active its only have background color in arround of the text, but when choose recommendation, the background color so big.我想那样做，但我不知道怎么做

标签： html css twitter-bootstrap navbar nav-pills

【解决方案1】：

当li 处于活动状态时，请添加.last-child 类。

.nav-pills>li>a {
  padding: 10px 35px;
  border-radius: 0;
  color: #fff;
}

.nav-pills {
  padding: 5px 0 0;
  background-color: #f8e713;
  display: block;
  float: left;
  width: 100%;
}

.nav-pills>li {
  float: left;
  list-style:none;
}

.nav-pills>li.last-child {
  background-color: #fff;
  float: none;
  overflow: hidden;
}

.nav-pills>li.last-child a {
  color: #333;
}

<div id="tabs-profile">
  <ul class="nav nav-pills uppercase bold">
    <li class="active"><a data-toggle="pill" href="#portfolio">portfolio</a></li>
    <li><a data-toggle="pill" href="#info">info</a></li>
    <li class="last-child"><a data-toggle="pill" href="#recommendation">recommendation</a></li>
  </ul>
</div>
<!-- tabs-profile -->

【讨论】：

谢谢，但它仍然不能解决我的问题。我想让最后一个 li.active 有背景颜色，直到导航栏结束，就像第二个图像一样。是的先生！
请检查答案！
如你所见，最后一个 li 直到导航栏结束都是背景色，即使它没有激活
请在最后一个li活动时添加“last-child”类，抱歉回复晚了:)