Make last li block until the end of pills

Question

So I have a design like this:

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

And my css:

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

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

Question:

How to make the last li that have background color until the end of navpills when active?

so i have 3 tabs just like tha image, and i want to make the last tab to have background color that block until the end of 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. i want to do like that but i dont know how — vandi, Feb 05 '16 at 12:39

Krish · Accepted Answer · 2016-02-06T04:10:50.813

0

Please add .last-child class when the li is active.

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

edited Feb 06 '16 at 04:10

answered Feb 05 '16 at 12:38

Krish

1,884
2
16
40

thank, but its still not fix my problem. i want to make the last li.active have background color until the end of navbar, just like the second image. yes sir !! – vandi Feb 05 '16 at 12:49
Please check the answer! – Krish Feb 05 '16 at 12:56
as you can see, the last li have background color until the end of navbar, even itsnot active – vandi Feb 05 '16 at 13:36
Please add "last-child" class when the last li is active , sorry for the late reply :) – Krish Feb 06 '16 at 04:11

Make last li block until the end of pills

1 Answers1