具有背景图像时，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

背景图片确实让事情变得复杂了。但是，您可以在li qnd上使用相同的背景图片，将它们放在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/

Answer 2

您可以使用伪元素完成此操作。这有点棘手，但它确实有效：

.tabmenu {
    position: relative; /* Needed for absolutely positioned pseudo elements */
    display: table; /* Needed to clear floats */
    padding-left: 0; /* Reset to 0 so left border doesn't get "pushed" away */
}

.tabmenu:before, .tabmenu:after {
    /* These styles set the bottom border that are "outside" of the menu */
    content: "";
    border-bottom: 1px solid white;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.tabmenu:before {
    left: -100%; /* Extend the left border beyond the its parent container */
}

.tabmenu:after {
    right: -100%; /* Extend the right border beyond the its parent container */
}

我在这里为你设置了一个jsfiddle：http://jsfiddle.net/jpw3q/7/

Answer 3

是的，你可以减少背景图像的高度，你可以给出边框。

Answer 4

只使用border none

ul li.active {border-bottom:0}

Answer 5

试试这个！

ul { overflow: hidden; margin-bottom: -1px; list-style: none;}
ul li { width: 100px; float: left; padding: 10px; border: 1px solid #ccc; border-width: 0px 0px 1px 0px; }
ul li.active { border-width: 1px 1px 0px 1px; }

<ul>
  <li>Tab 1</li>
  <li class="active">Tab 2</li>
  <li>Tab 3</li>
</ul>