HTML で順序付きリストを逆にする方法-CSSチュートリアル-php.cn

HTML で順序付きリストを逆にする方法

Linda Hamilton

リリース： 2024-11-11 20:57:03

オリジナル

772 人が閲覧しました

How to Reverse an Ordered List in HTML?

HTML での逆順リスト

CSS/SCSS を使用すると、リストを逆順で表示できます。 1 つの方法では、親要素を 180 度回転し、子要素を -180 度回転するように設定します。このメソッドは、視覚的に反転されたリストを作成します。

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

ログイン後にコピー

別のアプローチでは、フレックスボックスと "order" プロパティを使用します。このオプションでも同様の結果が得られますが、要素を回転する必要はありません:

ul {
    display: flex;
    flex-direction: column-reverse;
}
ul > li {
    order: 1;
}

ログイン後にコピー

代わりに、疑似要素とともに「counter-increment」を使用して、リストを逆順に表示する別の方法を提供できます:

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

ログイン後にコピー

実践的なデモンストレーションのために、回答に記載されているリンク例を選択してください。

以上がHTML で順序付きリストを逆にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。