Вкладки CSS как Google Chrome

Question

Мне нужно реализовать вкладки CSS, похожие на вкладки Google Chrome.

Если вкладок слишком много, они должны свернуть до минимальной возможной ширины, но если есть только несколько вкладок, они должны быть, например, 150 пикселей.

В настоящее время он отлично работает, когда есть много вкладок, но когда есть только 3 вкладки, это выглядит не так, как ожидалось.

HTML

<h1>Lots of tabs, works fine</h1> 
<ul class="tabs"> 
    <li class="active"><a href="#" title="Active tab">Active tab</a> 

    </li> 
    <li><a href="#" title="Inactive tab 1">Inactive tab 1</a> 

    </li> 
    <li><a href="#" title="Inactive tab 2">Inactive tab 2</a> 

    </li> 
    <li><a href="#" title="Inactive tab 3">Inactive tab 3</a> 

    </li> 
    <li><a href="#" title="Inactive tab 4">Inactive tab 4</a> 

    </li> 
    <li><a href="#" title="Inactive tab 5">Inactive tab 5</a> 

    </li> 
    <li><a href="#" title="Inactive tab 6">Inactive tab 6</a> 

    </li> 
    <li><a href="#" title="Inactive tab 7">Inactive tab 7</a> 

    </li> 
    <li><a href="#" title="Inactive tab 8">Inactive tab 8</a> 

    </li> 
    <li><a href="#" title="Inactive tab 9">Inactive tab 9</a> 

    </li> 
    <li><a href="#" title="Inactive tab 10">Inactive tab 10</a> 

    </li> 
</ul> 

<h1>Few of tabs, works not as expected</h1> 
<ul class="tabs"> 
    <li class="active"><a href="#" title="Active tab">Active tab</a> 

    </li> 
    <li><a href="#" title="Inactive tab 1">Inactive tab 1</a> 

    </li> 
    <li><a href="#" title="Inactive tab 2">Inactive tab 2</a> 

    </li> 
</ul> 

CSS

.tabs { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    margin: 0; 
    padding: 0; 
} 
.tabs li { 
    display: table-cell; 
    vertical-align: top; 
    white-space: nowrap; 
} 
.tabs li a { 
    text-align: center; 
    display: block; 
    color: #979797; 
    padding: 10px 10%; 
    text-decoration: none; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 
.tabs li.active { 
    width: 150px; 
} 
.tabs li.active a { 
    padding-left: 15px; 
    padding-right: 15px; 
    background: #22234e; 
    color: #fff; 
} 
.tabs li:not(.active):hover { 
    width: 150px; 
} 

JSFiddle пример: http://jsfiddle.net/ang3r/k9rLLqwo/

Спасибо!

Answer 1

Хорошо, спасибо всем за предложения. Я сделал это работать во всех браузерах:

CSS

.tabs { 
    list-style: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 
} 
.tabs li { 
    width: 150px; 
} 
.tabs li a { 
    text-align: center; 
    display: block; 
    color: #979797; 
    padding: 10px 15px; 
    white-space: nowrap; 
    text-decoration: none; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 
.tabs li.active a { 
    background: #22234e; 
    color: #fff; 
} 
.tabs li.active, .tabs li:not(.active):hover { 
    min-width: 150px; 
    max-width: 150px; 
} 

http://jsfiddle.net/k9rLLqwo/40/

Он основан на: https://stackoverflow.com/a/9390015/1741042

Answer 2

Считаете ли вы использование jquery для подсчета количества элементов, а затем выполните 100/нет. и затем применить это значение в процентах к ширине каждого элемента.

Я думаю, что это был бы лучший подход для вас.

Надеюсь, это поможет