Вкладки с переменной шириной (автоматическая ширина)

Question

Я пытаюсь создать вкладки, используя CSS вместо изображений. Я хочу, чтобы вкладки автоматически подстраивались под содержимое в них, однако я хочу, чтобы их максимальная ширина составляла 200 пикселей. Я хотел бы, чтобы ширина вкладки автоматически подстраивалась под содержимое, чтобы вкладки имели переменную ширину, но сохраняли отступ в 20 пикселей влево / вправо. Кто-нибудь может объяснить, как это сделать?

Вот мой 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:inline CSS или сделать div промежуток:

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

Answer 2

Добавьте display: inline-block, чтобы он уменьшился до ширины содержимого.