通過CSS,我們可以輕松地控制列表項(li)的排序。下面是幾種主要的方式:
/* 1. 列表項按字母順序排序 */ ul { list-style: none; } li { display: inline-block; margin-right: 10px; } li:before { content: ""; } li:first-child:before { content: "A"; } li:nth-child(2):before { content: "B"; } li:nth-child(3):before { content: "C"; } /* 2. 列表項按數字順序排序 */ ol { list-style: none; } li { counter-increment: item; } li:before { content: counter(item) "."; } /* 3. 隨機生成排序數字 */ ul { list-style: none; } li { position: relative; } li:before { content: attr(data-order); position: absolute; left: -30px; font-weight: bold; } li[data-order="1"]:before { content: "1"; } li[data-order="2"]:before { content: "3"; } li[data-order="3"]:before { content: "4"; } li[data-order="4"]:before { content: "2"; } /* 4. 拖拽排序 */ ul { list-style: none; } li { margin: 5px; }
以上是CSS控制列表項排序的幾種方法,可以根據不同的需求進行選擇。
上一篇css 控制p長度