CSS标签作为Google Chrome浏览器

no1lov3sme 发表于 Dev

no1lov3sme

我需要实现类似于Google Chrome标签页的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/

谢谢！

no1lov3sme

好的，谢谢大家的建议。我让它在所有浏览器中都能正常工作：

的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;
}