Как расположить разделители строго по центру между элементами?

Question

[SexyMonkey]

Есть меню, растянутое на всю ширину с помощью text-align: justify;
Как поместить разделители строго посередине между соседними пунктами меню?
Меню должно быть резиновым. Размер пунктов различным.

Пен

UPD: Решила проблему добавлением через один пустых пунктов списка со своим стилем. М.б. есть более элегантное решение?

Answer 1

[Руслан Галиев]

Я в CSS не мастак... может так?

ul{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 30px;}
 
li {
     width: 19%;
     display: inline-block;
      vertical-align: top;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-right: 1px solid red;
      position: relative;}
  
  li:last-child
{border-right: none;
}

Comments

[SexyMonkey]

Пунктам списка нельзя задавать ширину .

[Руслан Галиев]

SexyMonkey: какая цель преследуется?

[SexyMonkey]

Руслан Галиев: Применение text-align: justify; полностью описывает заданную цель.
Меню, выравненное строго по краям контейнера, с автоматическим центрированием.

[Руслан Галиев]

SexyMonkey: понял, спасибо.