css - CSS重叠标签不同的宽度

Question

我发现许多 CSS 教程非常适合重叠选项卡，但它们都没有每个选项卡的不同宽度。甚至可以根据标题的大小改变宽度吗？

以下是 3 个选项卡作为它们如何变化的示例。

关于我们 | 汽车玻璃紧急和商务玻璃服务

注意：选项卡的图形有阴影，当然是 PNG 24，所以它会重叠，但我无法想象如何改变宽度。

会有图形的一部分做一个repeat-x吗？如果是这样，您将如何放置端盖并仍然基于活动选项卡？

编辑： 这是一个链接，显示每个选项卡的长度如何与选项卡的静态图像相同。我需要弄清楚如何做完全相同的事情，但标签的中间部分能够根据标签的标题“增长”宽度：http: //code-pal.com/examples/how-to-code-一个重叠的菜单/

score 2 · Accepted Answer

我认为本教程将真正帮助您。它会完全按照您的要求重叠具有可变宽度的选项卡。它似乎不是无限宽，但您只需将较长边的长度调整为比它们需要的更长。

score 0 · Accepted Answer

使用填充。

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2 is really long</li>
    <li>Item 3</li>
</ul>

CSS

ul li {
    display: inline-block;
    padding: 0 25px;
    background: #F00;
    color: #FFF;
}

score -1 · Accepted Answer

我相信您正在寻找CSS3 中支持的多种背景

我很快就会发布一个演示。

编辑：另一个答案被接受，我没有发布演示。

3 回答 3