CSS標籤去掉活動選項卡的底邊框，其背景圖像

時，我有一個tabmenu它看起來像這樣： tab CSS標籤去掉活動選項卡的底邊框，其背景圖像

目前，邊框上listItems中添加，但我想提出在底邊框在ul上，因爲它需要在第一個li之前有一個完整的寬度和一點餘量。

通常情況下，ul的底部邊框被添加並且具有相同背景顏色的活動li的底部邊框完成了這個技巧，但是在這裏我有一個背景圖像，我無法弄清楚如何實現。

有人有解決方案嗎？

更新上發佈的jsfiddle：http://jsfiddle.net/jpw3q/

<ul class="tabmenu"> 
    <li data-tab-contentid="general" class="active">Algemene gegevens</li> 
    <li data-tab-contentid="brands">Merken</li> 
    <li data-tab-contentid="openinghours">Openingsuren</li> 
    <li data-tab-contentid="promotions">Promoties</li> 
    <li data-tab-contentid="advertise">Mijn advertenties</li> 
</ul>

來源

2014-02-24 Rubinho G.

你能添加的jsfiddle？ – willanderson

背景圖像確實事情有點複雜。您可以在您的li qnd上使用相同的背景圖像，將它們放置在ul的底部邊界上一個像素。這種技術的缺點是您必須將背景精確地放置在li之內，以便與ul的背景圖像完美對齊，這使得它幾乎不是動態解決方案。

我認爲你應該保持你的css的狀態，並在第一個li的左邊和最後一個的右邊加上一條小線，並用這種方式模仿效果。（至少如果我理解的正確，那麼你應該很容易用僞選擇器來實現，如:before或:after。

我認爲CSS會是這個樣子：

li:first-child { 
    position: relative; 
} 
li:first-child:before { 
    content: ''; 
    position: absolute; 
    right: 100%; 
    bottom: 0; 
    width: 30px; 
    border-bottom: 1px solid #fff; 
}

顯然，你將需要改變寬度，並運用類似li:last-child:after的東西，但我猜你得到的總體思路。如果沒有，請隨時詢問！

和更新後的提琴：http://jsfiddle.net/jpw3q/4/

來源

2014-02-24 19:59:23 Pevara

感謝PeterVR，您的僞選擇器解決方案有效。只需要解決一些小問題，但它的作品 –

graag gedaan @RubenGekiere ;-) – Pevara

是可以降低的背景圖像高度，你可以給邊境。

來源

2014-02-24 19:40:01 Ravi

只要使用邊框無

ul li.active {border-bottom:0}

來源

2014-02-24 19:42:39 httpgio

你可以做到這一點使用僞元素。這是一個有點棘手，但它的工作原理：

.tabmenu { 
    position: relative; /* Needed for absolutely positioned pseudo elements */ 
    display: table; /* Needed to clear floats */ 
    padding-left: 0; /* Reset to 0 so left border doesn't get "pushed" away */ 
} 

.tabmenu:before, .tabmenu:after { 
    /* These styles set the bottom border that are "outside" of the menu */ 
    content: ""; 
    border-bottom: 1px solid white; 
    bottom: 0; 
    position: absolute; 
    width: 100%; 
} 

.tabmenu:before { 
    left: -100%; /* Extend the left border beyond the its parent container */ 
} 

.tabmenu:after { 
    right: -100%; /* Extend the right border beyond the its parent container */ 
}

我已經設置了的jsfiddle爲你在這裏：http://jsfiddle.net/jpw3q/7/

來源

2014-02-24 20:17:07

試試這個！

ul { overflow: hidden; margin-bottom: -1px; list-style: none;} 
 
ul li { width: 100px; float: left; padding: 10px; border: 1px solid #ccc; border-width: 0px 0px 1px 0px; } 
 
ul li.active { border-width: 1px 1px 0px 1px; }

<ul> 
 
    <li>Tab 1</li> 
 
    <li class="active">Tab 2</li> 
 
    <li>Tab 3</li> 
 
</ul>

來源

2016-01-07 08:36:29

CSS標籤去掉活動選項卡的底邊框，其背景圖像

回答

相關問題