CSS里的li元素是非常常見(jiàn)的一個(gè)元素,最常見(jiàn)的應(yīng)用場(chǎng)景就是列表。li元素在CSS中有一些自帶的屬性,下面我們來(lái)一一了解一下。
li { list-style-type: disc; list-style-position: inside; list-style-image: none; }
list-style-type屬性用來(lái)指定列表項(xiàng)符號(hào)的類(lèi)型,常見(jiàn)的取值有disc、circle、square、decimal、lower-alpha等。我們通過(guò)設(shè)置這個(gè)屬性,可以很方便地調(diào)整li元素的符號(hào)樣式。
list-style-position用來(lái)指定列表項(xiàng)符號(hào)的位置,取值可以是inside或outside。當(dāng)設(shè)置為inside時(shí),符號(hào)會(huì)在文本內(nèi)容內(nèi)部,當(dāng)設(shè)置為outside時(shí),符號(hào)會(huì)在文本內(nèi)容外部。這個(gè)屬性也能影響兩個(gè)li元素之間的空隙。
list-style-image用來(lái)指定自定義的列表項(xiàng)符號(hào),可以是本地圖片或者遠(yuǎn)程圖片的URL。如果設(shè)置了list-style-image,那么list-style-type就會(huì)失效,它不再起作用。
除此之外,還有一些在li元素上使用的其他屬性,比如list-style、list-style-position、list-style-type,當(dāng)然這些屬性不如上面幾個(gè)屬性這么常用。