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

Question

我正在尝试使用CSS而不是图像创建标签。我希望标签能够自动调整到其中的内容，但我希望它们的最大宽度为200px。我希望标签宽度自动调整到内容，以便标签具有可变宽度但保持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;
}

And a JSFiddle！

谢谢！

Answer 1

使用display:inline css或将div设为span：

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

Answer 2

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