0

私が試しているもののjsFiddleがあります：

私の問題は、<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%);
}
4

1 に答える 1

2

境界線の前（上）でカットオフされるため、とulを持っているborder-bottom と overflow:hidden、希望することを達成できなくなります。li

を非表示にulしておく必要があるようです。それは問題ありませんが、国境を偽造する必要があります。これを行うには、疑似要素を作成し、それを'sの後ろに配置します。これがCSSとフォークされたJSFiddleです：http：//jsfiddle.net/rgthree/2xfkB/overflow:hiddenlibox-shadowli

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-06T01:15:34.547 に答える