css - 根据内部列表元素的数量调整 div 宽度

Question

我有一种包含在“药丸”之类的导航类型。

我需要pill(周围容器)根据导航中的元素数量自动调整大小。

我的 pill 容器位于页面中央，所以我不认为 float: left; 或 float: right;会起作用，因为它将覆盖 margin: 0 auto;。

这是我的问题的一个例子:http://jsfiddle.net/TylerB/EU6XG/1/

如何根据列表中导航项的数量设置此 div 元素的宽度？

Answer 1

只需添加display: table

演示 http://jsfiddle.net/kevinPHPkevin/EU6XG/6/

.tabset-container {
    margin: 0 auto;
    position: relative;
    top: 25px;
    z-index: 1;
    background: transparent;
    text-align: center;
    display:table;
}

同时将 overflow:hidden 添加到选项卡，以便圆 Angular 仍然显示

.tabset {
        overflow:hidden;
}