Bagaimana untuk Memaparkan Senarai dalam Susunan Terbalik menggunakan HTML dan CSS?

Memaparkan Senarai Tertib Terbalik dengan HTML dan Penggayaan

Dalam CSS/SCSS, membalikkan susunan elemen dalam senarai HTML boleh dicapai melalui pelbagai kaedah:

Kaedah 1: Putaran dan Putaran Songsang

Teknik ini melibatkan pemutaran elemen induk sebanyak 180 darjah dan kemudian putaran balas elemen anak sebanyak -180 darjah, secara berkesan membalikkan susunannya pada skrin.

ul {
    transform: rotate(180deg);
}

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

Kaedah 2: Flexbox dengan Sifat Pesanan

Flexbox menyediakan keupayaan untuk mengawal susunan elemen menggunakan sifat pesanan . Dengan menetapkan nilai tertib negatif untuk elemen anak, ia boleh diletakkan dalam susunan terbalik dalam senarai.

Kaedah 3: Penambahan Balas dengan Unsur Pseudo

Sementara bukan pembalikan tertib yang sebenar, kaedah ini menggunakan kenaikan balas dan unsur pseudo untuk memaparkan nombor item dalam susunan terbalik.

ul {
    list-style-type: none;
    counter-reset: item 6;
}

ul > li {
    counter-increment: item -1;
}

ul > li:after {
    content: counter(item);
}

Contoh:

Inilah contoh senarai tersusun terbalik menggunakan Kaedah 1:

<ul>
  <li>1. I am a list item.</li>
  <li>2. I am a list item.</li>
  <li>3. I am a list item.</li>
  <li>4. I am a list item.</li>
  <li>5. I am a list item.</li>
</ul>

Keputusan Sebenar:

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.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Senarai dalam Susunan Terbalik menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!