作为谷歌浏览器的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 /否。的项目，然后将该值作为百分比应用于每个项目的宽度。

我认为这将是最适合您的方法。

我希望这有助于