html - 当有背景图片时，CSS 选项卡移除事件选项卡上的底部边框

Question

我有一个如下所示的选项卡菜单:

目前，边框添加在列表项上，但我想将底部边框放在 ul 上，因为它需要在第一个 li 之前有一个完整的宽度和一点边距。

通常，添加 ul 的底部边框和具有相同背景颜色的事件 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 上使用相同的背景图像，然后将它们放置在 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 的内容，但我想您已经大致了解了。如果没有，请随时询问!

和你更新的 fiddle :http://jsfiddle.net/jpw3q/4/