Question

我发现了许多CSS教程，这些教程非常适合重叠选项卡，但是没有一个教程对每个选项卡都有不同的宽度。是否可以根据标题的大小更改宽度？

以下是3个标签，作为它们如何变化的示例。

关于我们|汽车玻璃|紧急情况商业玻璃服务

注意：标签的图形有阴影，当然是PNG 24，因此它会重叠，但我无法想象如何改变宽度。

图片的一部分是否会重复-x？如果是这样，您将如何设置结束并仍然基于活动标签？

编辑：这是一个链接，显示每个标签的相同长度，以及标签的静态图像。我需要弄清楚如何做同样的事情，但是根据标签的标题，标签的中间部分能够“增长”宽度： http://code-pal.com/examples/how-to-code-an-overlapped-menu/

Answer 1

我认为本教程将真正帮助你。它与可变宽度重叠的标签完全像您要求的那样。它似乎没有无限宽，但你只需要调整较长边的长度，使其长度超过它们所需的长度。

Answer 2

使用填充。

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

Answer 3

我相信您正在寻找CSS3支持的Multiple Backgrounds

我即将发布演示。

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