Html 当有背景图像时，CSS选项卡移除活动选项卡上的底部边框

我有一个选项卡菜单，如下所示：

目前，在listitems上添加了边框，但我想在ul上添加底部边框，因为它需要在第一个li之前有一个全宽和一点边距

通常情况下，添加ul的下边框和具有相同背景颜色的活动li的下边框会起作用，但这里有一个背景图像，我不知道如何实现相同的效果

有人有解决办法吗

更新发布在JSFIDLE上：

Algemene gegevens
梅肯
Openingsuren
促销活动
Mijn广告

是的，您可以降低背景图像的高度，并提供边框

只需使用border none

ul li.active {border-bottom:0}

---

背景图像确实使事情复杂了一点。但是，您可以在

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
的内容，但我想您已经了解了大概的意思。如果没有，请随时提问

更新后的fiddle:
您可以使用伪元素完成此操作。这有点棘手，但很有效：

.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 */
}

我在这里为您设置了一个JSFIDLE:
试试这个


ul{溢出：隐藏；页边距底部：-1px；列表样式：无；}
ul li{宽度：100px；浮动：左；填充：10px；边框：1px实心#ccc；边框宽度：0px 0px 1px 0px；}
ul li.active{边框宽度：1px 1px 0px 1px；}

表1
表2
表3
您可以添加JSFIDLE吗？谢谢PeterVR，您的伪选择器解决方案可以工作。只需要解决一些小问题，但它可以工作（graag gedaan@RubenGekiere；-）
.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 */
}