Comment afficher un reverse-liste ordonnée en HTML?

J'ai besoin d'aide. Est-il une façon de montrer à l'inverse liste ordonnée dans css/scss? Quelque chose de semblable à ceci:

  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.
  • Numéroté -> Condamne
  • Voulez-vous les numéros de compte à rebours ou voulez-vous pour inverser l'ordre des éléments? Il n'est pas possible de dire à partir de votre exemple.
InformationsquelleAutor Monkviper | 2014-09-05
  1. 48

    Vous pouviez faire tourner l'élément parent 180deg et ensuite faire tourner les enfants des éléments -180deg.

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

    Exemple

    Sinon, vous pouvez utiliser flex boîtes avec le ordre de la propriété.

    Bien que ce n'est pas techniquement l'inversion de l'ordre, vous pouvez également utiliser counter-increment avec un pseudo élément.

    Exemple

    ul {
    list-style-type:none;
    counter-reset:item 6;
}
ul > li {
    counter-increment:item -1;
}
ul > li:after {
    content: counter(item);
}
    • C'est un impressionnant "hack". Je vous remercie. 🙂
    • Je ne peux pas aider mais se demander ce que l'histoire derrière en pensant que cela devrait fonctionner. Résolu mon problème de la journée, je vous remercie.
    • 'transformer' est génial, mais il change la direction de défilement ainsi. Est-il un moyen de le réparer?
    • Je suppose que vous pourriez ajouter direction: rtl pour inverser la barre de défilement comme dans cette mise à jour exemple: jsfiddle.net/p8coyed4 Qui est relativement hackish mais, depuis la position initiale de la barre de défilement est ensuite au fond... Si vous voulez juste utiliser le flexbox modèle à ce point et utiliser le order propriété ou flex-direction: column-reverse
    • thx. "direction: rtl" n'est pas exactement ce dont j'ai besoin. En fait "transformer" changements intervenus dans la direction de défilement (bas->) et il devient un autre UX pour les utilisateurs finaux que d'habitude. "flex-direction: colonne inverse semble prometteur, mais il semble qu'il a un bug de Firefox..
    InformationsquelleAutor Josh Crozier
  2. 33

    Vous pouvez utiliser flexbox pour atteindre cet objectif. Il vous permet d'inverser l'ordre avec le flex-direction propriété.

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

li {
    flex: 0 0 auto;
}
    • il a moins de prise en charge du navigateur.
    • Moins que quoi?
    • il ne supporte pas IE8,9.
    • Même Microsoft ne prend en charge IE8 plus..
    • Ni la transformation de la solution.
    • Un gentil ;). Mais le compteur d'incrémentation on ne ~ caniuse.com/#feat=css-counters
    • Le compteur d'incrémentation ne pas inverser l'ordre des éléments de la liste, il inverse l'ordre de la numérotation. L'OP ne jamais précisé ce qu'ils voulaient.
    • Je vais aller avec compteur d'incrémentation de ne pas transformer une.
    • pourquoi le li { flex: 0} ?

    InformationsquelleAutor Quentin
  3. 24
    <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>
    InformationsquelleAutor Mkapin
  4. 0

    vérifier ce lien ...
    vous pouvez utiliser flex-direction: de la ligne arrière;

    entrez description du lien ici

    InformationsquelleAutor Amir Rezvani
  5. 0

    Si vous souhaitez commander votre liste dans l'ordre décroissant, au lieu de monter:

    Réponse rapide: reversed="reversed".

    Lire ci-dessous pour plus d'explications:

    Dans les versions précédentes de HTML, le seul moyen d'y parvenir était de placer un attribut de valeur sur chaque lielement, avec successivement les valeurs décroissantes.

    <h3>Top 5 TV Series</h3>
<ol>
  <li value="5">Friends
  <li value="4">24
  <li value="3">The Simpsons
  <li value="2">Stargate Atlantis
  <li value="1">Stargate SG-1
</ol>

    Le problème avec cette approche est que spécifiant manuellement chaque valeur peut être de temps à écrire et à maintenir, et la valeur de l'attribut n'a pas été autorisé dans le code HTML 4.01 ou XHTML 1.0 Strict DOCTYPEs (bien que HTML 5 résout ce problème et permet à la valeur de l'attribut)
    Le nouveau balisage est très simple: il suffit d'ajouter une inversion de l'attribut de l'élément ol, et éventuellement fournir une valeur de départ. Si il n'y a aucune valeur de début prévue, le navigateur va compter le nombre d'éléments de la liste, et le compte à rebours de ce nombre à 1.

    <h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
  <li>Police Academy (Series)
  <li>Harry Potter (Series)
  <li>Back to the Future (Trilogy)
  <li>Star Wars (Saga)
  <li>The Lord of the Rings (Trilogy)
</ol>

    Comme il y a 5 éléments de la liste dans la liste, la liste compte à rebours de 5 à 1.
    L'inversion de l'attribut est un attribut booléen. En HTML, la valeur peut être omise, mais en XHTML, il doit être écrit: inversé="inversé".

    Source: https://dzone.com/articles/html-5-reverse-ordered-lists

    InformationsquelleAutor RockstarSteph