如何使一個標籤效應，即李底部邊框爲白色

Question

我試圖創建一個標籤的效果，因爲你在這個小提琴看到：http://jsfiddle.net/kZTUK/

的問題是，李是活躍需要有一個白色的底部邊框，以使其看起來像一個標籤。

我想不通這是怎麼同時保持李鴻章爲塊做（我需要他們作爲顯示：由於其他原因塊。）

任何想法。謝謝，

<style> 
.item-list { 
border-bottom: 1px solid grey; 
overflow: hidden; 
} 

li { 
display: block; 
float: right; 
margin: 0 30px 0 0; 
padding: 5px 10px;  
} 

li.active { 
border:1px solid black; 
border-bottom:none;  
} 
</style> 

<div class="item-list"> 
    <ul class="my_ul"> 
     <li class="first active">one</li> 
     <li class="">two</li> 
     <li class="">three</li> 
     <li class="last">four</li> 
    </ul> 
</div> 

Answer 1

沒有調整你的代碼太多，你改變溢出到你的.item-list類的靜態高度。

.item-list { 
border-bottom: 1px solid grey; 
height: 31px; 
} 
li { 
display: block; 
float: right; 
margin: 0 30px 0 0; 
padding: 5px 10px; 
} 
li.active { 
border:1px solid black; 
border-bottom: 2px solid #fff; 
} 

http://jsfiddle.net/HEUqC/12/

Answer 2

更改.item-list至30靜態高度 - 1 = 29px，使邊界重疊，然後設置在底邊框爲白色，而不是沒有。

.item-list { 
    border-bottom: 1px solid grey; 
    height: 29px; 
} 
li { 
    display: block; 
    float: right; 
    margin: 0 30px 0 0; 
    padding: 5px 10px; 
} 
li.active { 
    border:1px solid black; 
    border-bottom: 1px solid white; 
} 

http://jsfiddle.net/kZTUK/4/

Answer 3

注意背景色：

<div class="item-list"> 
<ul class="my_ul"> 
    <li class="first active">one</li> 
    <li class="">two</li> 
    <li class="">three</li> 
    <li class="last">four</li> 
</ul> 
</div> 

.item-list { 
    border-bottom: 1px solid grey; 
    height: 31px; 
} 

li { 
    display: block; 
    float: right; 
    margin: 0 30px 0 0; 
    padding: 5px 10px;  
} 

li.active { 
    border:1px solid black; 
    border-bottom: solid white; 
    background-color: white; 
}