用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; 
} 

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

这是我到目前为止所玩的内容的一个方面：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;
}

Answer 2

有一百万种方法可以做到这一点，但想到一种简单的方法是让所有非活动的页面按钮都有border-bottom而活动的按钮将其border-bottom设置为a透明值（或页面的颜色）。