html - 做最后一个 li 块直到药丸结束

Question

所以我有这样的设计：

还有我的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活动结束？

Answer 1

请在活动时添加.last-child课程li。

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