作爲谷歌瀏覽器的CSS標籤

Question

我需要實現類似於谷歌瀏覽器標籤的CSS標籤。

如果選項卡太多，它們應該摺疊到儘可能小的寬度，但如果只有很少的選項卡，它們應該是，例如150px。

目前它工作正常，當有很多選項卡時，但只有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 /否。的項目，然後將該值作爲百分比應用於每個項目的寬度。

我認爲這將是最適合您的方法。

我希望這有助於