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

Допустим есть код:
<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;
}


Получим чтото вроде вот этого:
5d4871e813129326489737.png

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

Как это сделать? Спасибо
  • Вопрос задан
  • 91 просмотр
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Ответ написан
Чтобы ширина блоков была пропорциональная контенту, следует родителю ul задать display: table, а детям li задать display: table-cell;.
Ну и выравнивание содержимого потом.

Результат
https://codepen.io/hisbvdis/pen/bXaVWE
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы