it-swarm.com.de

Wie zeige ich eine umgekehrt geordnete Liste in HTML an?

Ich brauche Hilfe. Gibt es eine Möglichkeit, die umgekehrte Reihenfolge in css/scss anzuzeigen? Etwas Ähnliches:

  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

Sie können das übergeordnete Element 180deg und dann die untergeordneten Elemente -180deg drehen.

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

Beispiel hier

Alternativ können Sie Flexboxen zusammen mit der Eigenschaft order verwenden.


Obwohl dies die Reihenfolge nicht technisch umkehrt, können Sie auch counter-increment zusammen mit einem Psuedo-Element verwenden.

Beispiel hier

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

Sie können flexbox dazu verwenden. Sie können die Reihenfolge mit der Eigenschaft flex-direction stornieren.

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

check this link out ... Sie können flex-direction verwenden: row-reverse;

Linkbeschreibung hier eingeben

0
Amir Rezvani

Wenn Sie Ihre Liste in absteigender Reihenfolge anstatt in aufsteigender Reihenfolge sortieren möchten:
Schnelle Antwort: reversed="reversed".


Lesen Sie unten zur Erklärung:

In früheren HTML-Versionen bestand die einzige Möglichkeit, dies zu erreichen, darin, jedem Lielement ein Wertattribut mit sukzessive abnehmenden Werten zuzuweisen.

<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>

Das Problem bei diesem Ansatz ist, dass das manuelle Angeben der einzelnen Werte zeitaufwendig sein kann, wenn sie geschrieben und verwaltet werden. Das Attribut value war in den strengen DOCTYPEs von HTML 4.01 oder XHTML 1.0 nicht zulässig (obwohl HTML 5 dieses Problem behebt und das Attribut value zulässt) Neues Markup ist sehr einfach: Fügen Sie dem Element ol einfach ein umgekehrtes Attribut hinzu und geben Sie optional einen Startwert an. Wenn kein Startwert angegeben wird, zählt der Browser die Anzahl der Listenelemente und zählt von dieser Zahl bis 1 herunter.

<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>

Da diese Liste 5 Listenelemente enthält, zählt die Liste von 5 bis 1 herunter. Das umgekehrte Attribut ist ein boolesches Attribut. In HTML kann der Wert weggelassen werden, in XHTML muss er jedoch wie folgt geschrieben werden: umgekehrt = "umgekehrt".

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

0
RockstarSteph