Ho bisogno di un aiuto rapido. C'è un modo in css/scss per mostrare la lista ordinata inversa. Qualcosa di simile a questo:Come visualizzare un elenco ordinato in ordine inverso in HTML?
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.
Si potrebbe ruotare l'elemento genitore 180deg e quindi ruotare gli elementi per bambini -180deg.
ul {
transform: rotate(180deg);
}
ul > li {
transform: rotate(-180deg);
}
In alternativa, è possibile utilizzare scatole flex insieme al order property.
Anche se questo non è tecnicamente ordine inverso, si potrebbe anche usare counter-increment oltre ad elemento pseudo .
ul {
list-style-type:none;
counter-reset:item 6;
}
ul > li {
counter-increment:item -1;
}
ul > li:after {
content: counter(item);
}
Questo è un fantastico "trucco". Grazie. :) – st2rseeker
Non posso fare a meno di chiedermi quale sia la trama che sta alla base del successo di questo. Risolto il mio problema del giorno, grazie. – CodeMonkeyG
È possibile utilizzare FlexBox per raggiungere questo obiettivo. Ti consente di invertire l'ordine con la proprietà flex-direction.
ol {
display: flex;
flex-direction: column-reverse;
}
li {
flex: 0 0 auto;
}
<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>
Fornire un collegamento di riferimento all'attributo ol reversed. – user2864740
puoi fornire una demo? – Monkviper
FYI, questo inverte la numerazione, non l'ordine degli elementi della lista. – Azmisov
Numerato -> ordinato – user2864740
Vuoi che i numeri siano contati o vuoi invertire l'ordine degli articoli? Non è possibile raccontare dal tuo esempio. – Quentin