Ширина дочерних блоков от их содержимого, как сделать?

Question

[Денис Шатров]

Допустим есть код:

<ul>
    <li><a>Один</a></li>
    <li><a>Два</a></li>
    <li><a>Три</a></li>
    <li><a>Четыре</a></li>
    <li><a>Пять</a></li>
</ul>

.ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.li{
    border-right: 1px #ccc solid;
}
.li:last-child{
    border-right: none;
}

Получим чтото вроде вот этого:


А хочется чтобы ширина li зависела от контента и было что-то вроде вот этого:


Как это сделать? Спасибо

Comments

[Froggyweb]

ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
li{
  flex: 1;
  border-right: 1px #000 solid;
  text-align: center;
}
li:last-child{
    border-right: none;
}

[Рома Зварич]

Выложенный Вами код вообще не соответствует изображениям.
Подправьте пожалуйста, чтобы было с чем работать.
Можете заодно на https://codepen.io/pen/ выложить, чтобы смогли увидеть, что выглядит так, как нужно

[Денис Шатров]

https://codepen.io/denydenyden/pen/BXJNve
Вот сделал для примера, ну стили у меня чуть другие, думаю это не очень важно.

Answer 1

[Сергей delphinpro]

Comments

[Daniel Tkachenko]

Вариант явно свежее чем table-cel
Советую именно этот!

Answer 2

[Рома Зварич]

Чтобы ширина блоков была пропорциональная контенту, следует родителю ul задать display: table, а детям li задать display: table-cell;.
Ну и выравнивание содержимого потом.

Результат
https://codepen.io/hisbvdis/pen/bXaVWE

Comments

[Денис Шатров]

Спасибо!

[Ольга Ветер]

для таких вы есть отдельный котел...