在CSS中,我們可以使用浮動(dòng)(float)屬性將有序列表(ol)分成兩邊,以下是一個(gè)簡單的示例:
<ol> <li>項(xiàng)目1</li> <li>項(xiàng)目2</li> <li>項(xiàng)目3</li> <li>項(xiàng)目4</li> <li>項(xiàng)目5</li> <li>項(xiàng)目6</li> <li>項(xiàng)目7</li> <li>項(xiàng)目8</li> <li>項(xiàng)目9</li> <li>項(xiàng)目10</li> </ol>
ol { list-style-type: none; /* 移除列表前的序號(hào) */ counter-reset: item; /* 初始化計(jì)數(shù)器 */ } ol li { position: relative; /* 相對于其正常位置進(jìn)行定位 */ float: left; /* 浮動(dòng)到左側(cè) */ width: 50%; /* 寬度為容器寬度的50% */ counter-increment: item; /* 計(jì)數(shù)器遞增 */ } ol li:before { content: counter(item); /* 使用計(jì)數(shù)器作為列表項(xiàng)的前綴 */ }
在這個(gè)示例中,我們首先將列表樣式設(shè)置為list-style-type: none;
來移除列表前的序號(hào),我們使用counter-reset: item;
來初始化一個(gè)計(jì)數(shù)器,這個(gè)計(jì)數(shù)器會(huì)在每個(gè)列表項(xiàng)中遞增,我們將每個(gè)列表項(xiàng)設(shè)置為浮動(dòng)到左側(cè),并且寬度為容器寬度的50%,這樣列表就會(huì)分成兩邊,我們使用counter-increment: item;
來在每個(gè)列表項(xiàng)中遞增計(jì)數(shù)器,并使用content: counter(item);
來將計(jì)數(shù)器作為列表項(xiàng)的前綴。