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

【问题标题】：Variable width tabs (auto width)可变宽度标签（自动宽度）
【发布时间】：2014-01-14 19:46:35
【问题描述】：

我正在尝试使用 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;
}

谢谢！

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：