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

我有一种导航类型，包含在“ pill”中。

我需要pill（环绕容器）根据导航中的元素数量自动调整大小。

我在页面的中心放置了pill容器，因此我认为float: left;或float: right;不会起作用，因为它将覆盖margin: 0 auto;。

这是摆弄我的问题的例子：http://jsfiddle.net/TylerB/EU6XG/1/

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

最佳答案

只需添加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，这样您的圆角仍然会显示

.tabset {
        overflow:hidden;
}