css - 可变宽度标签（自动宽度）

Question

我正在尝试使用 CSS 而不是图像创建选项卡。我希望标签自动适应其中的内容，但是我希望它们的最大宽度为 200 像素。我希望标签宽度自动调整为内容，以便标签具有可变宽度但保持 20px 左/右填充。任何人都可以解释如何去做吗？

到目前为止，这是我的 HTML：

<div class="tab">
TEST
</div>

还有我的 CSS：

.tab {
    text-align:center;
    background:#000;
    padding:0 20px;
    max-width:200px;
    border-radius: 10px 10px 0 0;
    color:#fff;
}

还有一个 JSFiddle！

谢谢！

Answer 1

使用display:inlinecss 或使 div 成为跨度：

<span class="tab">
TEST
</span>

Answer 2

添加display: inline-block使其折叠到内容的宽度。