Как отобразить обратный упорядоченный список в 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. Ответ 1 Вы можете повернуть родительский элемент 180deg и затем повернуть дочерние элементы -180deg. ul { transform: rotate(180deg); } ul > li { transform: rotate(-180deg); } Пример здесь В качестве альтернативы вы можете использовать гибкие поля вместе с свойством 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); } Ответ 2 Вы можете использовать flexbox для достижения этого. Это позволяет вам изменить порядок с помощью свойства flex-direction. ol { display: flex; flex-direction: column-reverse; } li { flex: 0 0 auto; } spec живая демонстрация ограниченная поддержка браузера Ответ 3 <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> ссылка w3schools пример w3schools
Ответ 1 Вы можете повернуть родительский элемент 180deg и затем повернуть дочерние элементы -180deg. ul { transform: rotate(180deg); } ul > li { transform: rotate(-180deg); } Пример здесь В качестве альтернативы вы можете использовать гибкие поля вместе с свойством 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); }
Ответ 2 Вы можете использовать flexbox для достижения этого. Это позволяет вам изменить порядок с помощью свойства flex-direction. ol { display: flex; flex-direction: column-reverse; } li { flex: 0 0 auto; } spec живая демонстрация ограниченная поддержка браузера
Ответ 3 <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> ссылка w3schools пример w3schools