使最后一里块直到药丸结束

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

请在 li 激活时添加 .last-child class。

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

使最后一里块直到药丸结束

Make last li block until the end of pills

html

css

twitter-bootstrap

navbar

nav-pills