定位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元素以覆盖其父边界以制作制表符？

回答

相关问题