Есть горизонтальный список, где каждый элемент - просто текст и он работает хорошо
ul.hr {
margin: 0;
/* Обнуляем значение отступов */
padding: 4px;
/* Значение полей */
}
ul.hr li {
display: inline;
/* Отображать как строчный элемент */
margin-right: 5px;
/* Отступ слева */
border: 1px solid #000;
/* Рамка вокруг текста */
padding: 3px;
/* Поля вокруг текста */
}
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
Вывод такой:
Мчади Када на мацони Пахлава Кчуч Лилибдж
Но стоит мне попытаться сделать часть элементов более сложными, например вот так
ul.hr {
margin: 0;
/* Обнуляем значение отступов */
padding: 4px;
/* Значение полей */
}
ul.hr li {
display: inline;
/* Отображать как строчный элемент */
margin-right: 5px;
/* Отступ слева */
border: 1px solid #000;
/* Рамка вокруг текста */
padding: 3px;
/* Поля вокруг текста */
}
<ul class="hr">
<li>
Первая строчка
<br />
Вторая строчка
<br />
Третья строчка
</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>
Первая строчка
<br />
Вторая строчка
<br />
Третья строчка
</li>
<li>Лилибдж</li>
</ul>
Как все после <br />
уезжает на новую строчку. С <p>
история аналогичная.
Как мне таким образом создать список, который будет выглядеть вот так?
Первая строчка Первая строчка
Вторая строчка Вторая строчка
Третья строчка Када на мацони Пахлава Третья строчка Лилибдж