Настройка ширины div по количеству элементов внутреннего списка

Question

У меня есть тип навигации, который содержится в пределах 'pill'.

Мне нужен pill (окружающий контейнер) для автоматического изменения размера в зависимости от количества элементов в навигации.

У меня есть pill контейнера сосредоточенного на странице, так что я не думаю, что float: left; или float: right; будет работать, потому что он будет перекрывать margin: 0 auto;.

Вот скрипка с примером моего вопроса: http://jsfiddle.net/TylerB/EU6XG/1/

Как я могу установить ширину этого Div элемент на основе количества навигационных элементов в списке?

Answer 1

Просто добавьте display: table

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

Answer 2

Я шел в направлении JQuery - fiddle (получить ширину и пропустить ее через .css()) + display: inline-block на .tabset