it-roy-ru.com

Как отобразить список в обратном порядке в HTML?

Мне нужна помощь. Есть ли способ показать в обратном порядке список в css/scss? Что-то похожее на это:

  5. I am a list item.
  4. I am a list item.
  3. I am a list item.
  2. I am a list item.
  1. I am a list item.
25
Monkviper

Вы можете повернуть родительский элемент 180deg, а затем повернуть дочерние элементы -180deg.

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Пример здесь

В качестве альтернативы вы можете использовать flex-боксы вместе со свойством order.


Хотя это технически не меняет порядок, вы также можете использовать counter-increment вместе с элементом psuedo.

Пример здесь

ul {
    list-style-type:none;
    counter-reset:item 6;
}
ul > li {
    counter-increment:item -1;
}
ul > li:after {
    content: counter(item);
}
42
Josh Crozier

Вы можете использовать flexbox для достижения этой цели. Это позволяет вам изменить порядок с помощью свойства flex-direction.

ol { 
    display: flex;
    flex-direction: column-reverse;
}

li {
    flex: 0 0 auto;
}
29
Quentin
<ol reversed>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
</ol>
23
Mkapin

проверьте эту ссылку ... вы можете использовать flex-direction: row-reverse;

введите описание ссылки здесь

0
Amir Rezvani