Html 定位li元素以覆盖其父ul边框以制作制表符？_Html_Css

Html 定位li元素以覆盖其父ul边框以制作制表符？

html css

Html 定位li元素以覆盖其父ul边框以制作制表符？,html,css,Html,Css,我对我正在尝试的东西有一个大致的了解：我的问题是让元素在中向下移动1个像素，这样它们的边框将覆盖边框我希望这可以在没有额外加价的情况下完成，但我遇到了麻烦有什么想法吗 <ul class="tabs"> <li class="act">Active</li> <li>Not Active</li> </ul> body {background:#eee;} ul { margin:10px; p

我对我正在尝试的东西有一个大致的了解：

我的问题是让

元素在

中向下移动1个像素，这样它们的边框将覆盖

边框

我希望这可以在没有额外加价的情况下完成，但我遇到了麻烦

有什么想法吗

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


激活
不活跃

正文{背景：#eee；}
保险商实验室
{
边距：10px；左侧填充：20px；
溢出：隐藏；
边框底部：实心1pxRGBA（0,0,0,2）；
}
锂
{
显示：内联块；右边距：1px；
边框底部：实心1px透明；边框半径：7px 7px 0；
高度：35px；填充：09px；
字体：粗体12px/35px Arial；颜色：#444；
}
李·act
{
边框底部：实心1px#d4；
框阴影：0 1px rgba（255，255，255，0.75）插入，0 2px 5px rgba（0，0，0.5）；
背景：-莫兹线性梯度（顶部，0%，65%）；
背景：-webkit线性梯度（顶部，0%，65%）；
}

您的

ul

具有

边框底部和溢出：隐藏的将无法实现您想要的，因为您的li
将在边框之前（上方）被切断
我知道您希望您的ul
保持溢出：隐藏以隐藏li
的框阴影。那很好，但我们需要伪造边境。我们可以通过创建一个伪元素来实现这一点，并将其放置在li
后面。以下是CSS和分叉JSFIDLE：
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%);
}