How to make the menu items take the desired width?

Question

css

Hello, as you can see, there are menu items on the image. Active and hover point has a special strip. There is no distance between the strips. However, somehow each element occupies the desired width, and most likely different, in total they all give out 100%

Tell me how to do it?

Answer 1

On flex: https://jsfiddle.net/6n8p29rq/
display:table for older browsers: https://jsfiddle.net/4r4Lqo62/

Answer 2

or as they said on flex, but on old browsers it will sprinkle or:
(this is scss)

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

and for a full fashion add:

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