Question

我有jsFiddle我正在尝试的内容：

我的问题是让<li>元素在<ul>内向下移动1个像素，这样它们的边框就会覆盖<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%);
}

Answer 1

由于ul 和 border-bottom overflow:hidden li，您将无法实现所需目标在边界之前（上方）切断。

我看到您希望ul让overflow:hidden隐藏li的{{1}}。那很好，但我们需要伪造边框。我们可以通过创建一个伪元素来做到这一点，并将其置于box-shadow之后。这是CSS和分叉的JSFiddle：http://jsfiddle.net/rgthree/2xfkB/

li

定位li元素以覆盖其父级ul边框以制作标签？

1 个答案: