做最後李塊，直到丸

-1

而且我的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活動結束？

來源

2016-02-05 vandi

你能解釋一下你真正需要什麼？ – Krish

所以我有3個標籤只是像圖像，我想讓最後一個選項卡有背景顏色，阻止，直到nav-pill結束。正如您可以看到投資組合活動時，其文字周圍只有背景顏色，但在選擇推薦時，背景顏色如此之大。我想這樣做，但我不知道如何 – vandi

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

來源

2016-02-05 12:38:32 Krish

謝謝生病嘗試 – vandi

哦！現在問題很明確，請耐心等待:) – Krish

謝謝，但它仍然沒有解決我的問題。我想讓最後的li.active擁有背景色，直到導航欄結束，就像第二個圖像一樣。是的先生！！ – vandi

做最後李塊，直到丸

回答

相關問題