Динамически формирую список. В итоге получается что-то вроде:
ul.hr {
margin: 0;
padding: 4px;
}
ul.hr li {
display: inline;
margin-right: 5px;
border: 1px solid #000;
padding: 3px;
}
<div class="block">
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</div>
Как сделать так, чтобы на первой строчке отображалось только 3 элемента li, а на следющей 2 остальных, выровнянных по центру, что-то вроде этого: