具有背景图像时,CSS选项卡会删除活动选项卡上的底部边框

Question

我有一个tabmenu,看起来像这样:

目前,边框是在listitems上添加的,但我想将底部边框放在ul上,因为它需要在第一个li之前有一个全宽和一点边距.

通常情况下,添加了ul的底部边框,并且使用相同backgroundcolor的活动li的底部边框可以解决问题,但是这里我有一个背景图像,我无法弄清楚如何实现相同的效果.

有人有解决方案吗？

更新发布在jsfiddle:http://jsfiddle.net/jpw3q/

<ul class="tabmenu">
    <li data-tab-contentid="general" class="active">Algemene gegevens</li>
    <li data-tab-contentid="brands">Merken</li>
    <li data-tab-contentid="openinghours">Openingsuren</li>
    <li data-tab-contentid="promotions">Promoties</li>
    <li data-tab-contentid="advertise">Mijn advertenties</li>
</ul>

Answer 1

背景图像确实使事情有点复杂化.然而,你可以在你的liqnd 上使用相同的背景图像,将它们放在你的底部边框上方一个像素ul.这种技术的缺点是你必须准确地将背景定位在li与背景图像完美对齐的位置ul,这使得它几乎不是动态解决方案.

我认为你应该保持你的css原样li,并在最后一个的第一个和右边的左边添加一条小线,并以这种方式模仿效果.(至少如果我理解正确的话,那么你应该很容易用伪:before或类似的选择器来实现:after.)

我认为css看起来像这样:

li:first-child {
  position: relative;
}
li:first-child:before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 30px;
  border-bottom: 1px solid #fff;
}

显然你需要改变宽度,并应用类似的东西li:last-child:after,但我想你会得到一般的想法.如果没有,请随时问!

和你的更新小提琴:http://jsfiddle.net/jpw3q/4/