Css menu как добавить между элементами вертикальный разделитель?

Question

[Александр N++]

Добрый вечер помогите допилить меню, у меня не выходит добавить вертикальный разделитель между пунктами меню, как только не пробовал криво выходит.



Вот мое меню
www.cssdesk.com/t3JAB

Answer 1

[Дмитрий Пыткин]

Решение с использованием Flexbox: cssdesk.com/BFj4R
То-же самое, только с display: table cssdesk.com/gqRQz

Comments

[Александр N++]

я так изначально делал но не смог уменьшить разделитель и что бы первый и последний элемент были прижаты к краю текста.

[Дмитрий Пыткин]

Решение с использованием Flexbox: www.cssdesk.com/BFj4R

[Дмитрий Пыткин]

То-же самое, только с display: table www.cssdesk.com/gqRQz

[Александр N++]

Спасибо за ответы.
Я сделал через nav nav-justifined из bootstrap
+ media

#main-menu li a { margin-top: 0}
@media (min-width: 768px) {

    #main-menu li a {
        padding: 0 20px;
        border-right: 1px solid #fff;
        line-height: 13px;
    }
    #main-menu li:first-child a {
        padding: 0 20px 0 0;
        text-align: left;
    }
    #main-menu li:last-child a {
        padding: 0 0 0 20px;
        text-align: right;
        border: 0;
    }
    #main-menu li { display: table-cell; }

    #main-menu .dropdown-menu {
        background: none;
        border: none;
        box-shadow: none;
        margin: 10px 0 0;
    }
    #main-menu .dropdown-menu li a {
        border: none;
        color:  #3399cc;
        font-size: 14px;
        line-height: 30px;
        text-transform: uppercase;
        list-style: none;
    }

}

Answer 2

[Роман]

Как уже выше сказали, можно делать бордер. Я иногда прибегаю к другому варианту- использую :after необходимой высоты

Answer 3

[keslo]

Я обычно добавляю к каждому элементу списка границу справа кроме последнего элемента.

Comments

[Александр N++]

У меня проблема в том, что меню в стиле justify на всю ширину контента и вертикальные линии получаются не пропорционально друг от друга между пунктами меню

[Дмитрий]

Александр N++: так вы им задавайте ширину в процентах исходя из их количества