li要素をタブの親ul境界線を覆うように配置しますか？

Question

私がしようとしているかのjsFiddleあります

私の問題はそれほど彼らの境界線が<ul>国境をカバーします<ul>内の1つのピクセルをダウンする<li>要素を取得しているが。

これは、追加のマークアップなしで行うことができますが、私は問題を抱えていました。

アイデア？

<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%); 
} 

Answer 1

あなたのli（上記）国境の前にカットオフになるように、あなたはborder-bottomとoverflow:hiddenを持つあなたの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%); 
}​