Как сделать что бы пункты меню занимали нужную ширину?

Question

[DeniSidorenko]

Привет, как можно заметить на изображение есть пункты меню. Активный и пункт при наведение имеет особую полоску. Расстояние между полосок нету. Однако каким то образом каждый элемент занимает нужную ширину, и скорее всего разную , в сумме все выдают 100%


Подскажите как сделать?

Comments

[Ярослав Иванов]

100 / 8 = 12.5%

[Ankhena]

display:table и т.д.

или так на флексах https://jsfiddle.net/6n8p29rq/

Answer 1

[Ankhena]

На флексах: https://jsfiddle.net/6n8p29rq/

display:table для старых браузеров: https://jsfiddle.net/4r4Lqo62/

Comments

[alex-1917]

Решение на display:table люто рекомендую, работает железобетонно!!!

Answer 2

[tema_sun]

display: flex;
justify-content: space-between;

Answer 3

[Евгений]

или как сказали на флексах, но на старых броузерах посыпется или:
(это scss)

li {
        $baseWidth: 100% / 7;
        width: $baseWidth;
        //немного добавляем или убавляем длинну - чтобы отступы для 
        //длинных и коротких слов выглядели одинаково
        &:nth-child(2) {width: $baseWidth + 3%;}
        &:nth-child(5) {width: $baseWidth - 3%;}
}

а для полгого фэшена добавляем:

li {
        text-align: center;
        &:first-of-type {text-align: left;}
        &:last-of-type {text-align: right;}
}