csstabsvariable-width

Variable width tabs (auto width)

I am trying to create tabs using CSS instead of images. I want the tabs to automatically adjust to the content within them, however I want them to have a max-width of 200px. I would like for the tab width to adjust to the content automatically so that the tabs will have variable widths but maintain the 20px left/right padding. Can anyone explain how to go about this?

Here's my HTML so far:

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

And my CSS:

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

And a JSFiddle!

Thanks!

Solution

  • Use the display:inline css or make the div a span:

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