0

Есть горизонтальный список, где каждый элемент - просто текст и он работает хорошо

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> история аналогичная.

Как мне таким образом создать список, который будет выглядеть вот так?

Первая строчка                                            Первая строчка
Вторая строчка                                            Вторая строчка
Третья строчка       Када на мацони       Пахлава         Третья строчка          Лилибдж

1 ответ 1

1

ul.hr {
  list-style: none;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 4px;
}

ul.top {
    align-items: flex-start;
}

ul.hr li {
  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>

<hr>

<ul class="hr top">
<li>
    Первая строчка
    <br />
    Вторая строчка
    <br />
    Третья строчка
</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>
    Первая строчка
    <br />
    Вторая строчка
    <br />
    Третья строчка
</li>
<li>Лилибдж</li>
</ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.