CSS中列表的標(biāo)記通常是圓點(diǎn),但你有時想要去掉這些圓點(diǎn)。比如說,你可能想要創(chuàng)造一個導(dǎo)航菜單或者一個項(xiàng)目列表,但不想使用標(biāo)準(zhǔn)的圓點(diǎn)標(biāo)記。在這種情況下,你可以通過一些CSS屬性去除這些圓點(diǎn)。
/* 去除無序列表的圓點(diǎn) */ ul { list-style: none; margin: 0; padding: 0; } /* 去除有序列表的數(shù)字 */ ol { list-style: none; margin: 0; padding: 0; counter-reset: list; } ol li:before { content: counter(list) "."; counter-increment: list; margin-right: 0.5em; }
在上面的代碼中,list-style: none;
屬性移除了無序列表的圓點(diǎn),margin
和padding
屬性清除了默認(rèn)的空白間距。
對于有序列表,我們設(shè)置了一個名為list
的計(jì)數(shù)器,并使用counter-reset
屬性來重置它。然后在每個列表項(xiàng)前加上一個計(jì)數(shù)器的值。為了讓這些數(shù)字看起來像列表項(xiàng)一樣,我們給它們一個小小的右邊距。
通過這些CSS屬性,你可以輕松地去除無序或有序列表的圓點(diǎn)標(biāo)記,創(chuàng)造出符合你需求的列表樣式。