定位li元素以覆蓋其父邊界以製作製表符？

我的問題是獲得<li>元素往下走1個像素的<ul>內使自己的境界會掩蓋了<ul>邊界。

我希望這可以做到沒有額外的標記，但我一直有麻煩。

任何想法？

<ul class="tabs"> 
    <li class="act">Active</li> 
    <li>Not Active</li> 
</ul> 

body {background:#eee;} 
ul 
{ 
    margin:10px; padding-left:20px; 
    overflow:hidden; 
    border-bottom:solid 1px rgba(0,0,0,.2); 
} 
li 
{ 
    display:inline-block; margin-right:1px; 
    border-bottom:solid 1px transparent; border-radius:7px 7px 0 0; 
    height:35px; padding:0 9px; 
    font:bold 12px/35px Arial; color:#444; 
} 
li.act 
{ 
    border-bottom:solid 1px #D4D4D4; 
    box-shadow:0 1px rgba(255, 255, 255, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.5);    

    background: -moz-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%); 
    background: -webkit-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%); 
}

來源

2012-04-06 C.J.

您將無法達到你想要與具有border-bottom和overflow:hidden你ul什麼，你li會前（上圖）的邊界截止。

我看到你想讓你的ul保持overflow:hidden隱藏li的box-shadow。這很好，但我們需要僞造邊界。我們可以通過創建一個僞元素來做到這一點，並把它放在li的後面。這裏的CSS和一個分叉JSFiddle：http://jsfiddle.net/rgthree/2xfkB/

ul { 
    position:relative; 
    margin:10px; padding-left:20px; 
    overflow:hidden; 
} 
ul:before{ 
    content:'\0020'; 
    display:block; height:1px; overflow:hidden; 
    position:absolute; bottom:0px; left:0px; right:0px; z-index:1; 
    background:rgba(0,0,0,.2); 
} 
li { 
    position:relative; z-index:2; /* position on top of "border" pseudo-element */ 
    display:inline-block; margin-right:1px; 
    border-bottom:solid 1px transparent; border-radius:7px 7px 0 0; 
    height:35px; padding:0 9px; 
    font:bold 12px/35px Arial; color:#444; 
} 
li.act{ 
    border-bottom:solid 1px #D4D4D4; 
    box-shadow:0 1px rgba(255, 255, 255, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.5);    
    background: -moz-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%); 
    background: -webkit-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%); 
}

來源

2012-04-06 01:15:34 rgthree

超級，非常感謝。 – 2012-04-06 01:21:27

定位li元素以覆蓋其父邊界以製作製表符？

回答

相關問題