css - 使用 CSS 制作标签

Question

我有看起来像这样的标签:

 -------
 |  A  |   B    C 
 |     |  
------------------------

但我希望它们看起来像这样:

 -------
 |  A  |   B    C
 |     |    
--     ------------

也就是说，选项卡的底部边框消失了。为了创建这些选项卡，我在选项卡周围画了一个边框，将底部边框设置为无，然后在下一个 div 周围画了一个边框。 HTML 基本上是这样的:

<ul>
    <li class="current">Foo</li>
    <li>Bar</li>         
</ul>

<div class="otherStuff">
    Some other stuff here. 
</div> 

CSS 基本上是这样的:

ul { padding: 10px; 
margin: 0; } 
li { 
    display: inline; 
    padding: 10px; 
} 

li.current { 
    border: 1px solid #bbb; 
    border-bottom: none; 
} 

.otherStuff { 
    border-top: 1px solid #bbb; 
    border-bottom: 1px solid #bbb;
    margin: 0;
    padding: 15px; 
} 

有没有更好的方法来绘制这些标签？

这是我到目前为止一直在玩的 jsfiddle:http://jsfiddle.net/V9PQ7/

Answer 1

有多种方法可以实现这一点，根据周围的内容和您当前的布局模型，有些方法可能比其他方法效果更好。您可以尝试以下三种方法:

1) 定位 <li>水平线上的元素

通过设置li { position: relative }您可以四处移动列表元素。这允许我们将它们向下移动 1 个像素，因此它们的底部边框或底部边缘覆盖水平线。然后您可以使用 border-bottom 使事件选项卡覆盖该行，或通过设置 background-color .

Example 1 - JSFiddle

li {
    position: relative;
    bottom: -1px;
    display: inline;
    padding: 10px;
}
li.current {
    border: 1px solid #bbb;
    border-bottom: 1px solid #fff;
}

2) 用伪元素隐藏底线

另一种方法是生成伪元素(::before 或 ::after)以隐藏事件选项卡下的水平线。

Example 2 - JSFiddle

li.current {
    position: relative;
    border: 1px solid #bbb;
    border-bottom: 0;
}
li.current::after {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: -2px;
    width: 100%;
    border-bottom: 1px solid #fff;
}

3) 使用伪元素创建水平线

而不是在 ul 上设置边框元素，我们可以在伪元素上设置边框。然后我们可以将伪元素以及整行向上移动到列表元素后面。注意:我设置了 z-index:-1在下面的例子中。这可能会干扰您的布局模型。如果是这样，请增加该值，但请确保分配更大的 z-index到列表项，以便它们将显示在带有水平线的伪元素前面)

Example 3 - JSFiddle

ul {
    position: relative;
    padding: 10px;
    margin: 0;
}
ul::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 1px;
    width: 100%;
    border-bottom: 1px solid #bbb;
}