我有看起来像这样的标签:
-------
| 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/
最佳答案
有多种方法可以实现这一点,根据周围的内容和您当前的布局模型,有些方法可能比其他方法效果更好。您可以尝试以下三种方法:
1) 定位 <li>
水平线上的元素
通过设置li { position: relative }
您可以四处移动列表元素。这允许我们将它们向下移动 1 个像素,因此它们的底部边框或底部边缘覆盖水平线。然后您可以使用 border-bottom
使事件选项卡覆盖该行,或通过设置 background-color
.
li {
position: relative;
bottom: -1px;
display: inline;
padding: 10px;
}
li.current {
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
}
2) 用伪元素隐藏底线
另一种方法是生成伪元素(::before
或 ::after
)以隐藏事件选项卡下的水平线。
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
到列表项,以便它们将显示在带有水平线的伪元素前面)
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;
}
关于css - 使用 CSS 制作标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23810315/