主页 / 问题 / 1146390
Accepted
Potion
Asked:2020-06-28 01:01:34 +0000 UTC2020-06-28 01:01:34 +0000 UTC

带有垂直 HTML 元素的水平列表

  • 772

我有一个水平列表，其中每个项目都只是文本，而且效果很好

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>一个类似的故事。

如何创建一个看起来像这样的列表？

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

1 个回答

  1. Best Answer

    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>

    • 1

相关问题