App下載

在html中如何修改無(wú)序列表ul和li的格式呢?

猿友 2021-02-22 14:01:22 瀏覽數(shù) (11466)
反饋

前端開發(fā)時(shí)常會(huì)用到無(wú)序列表(?ul? ?li?) 來(lái)進(jìn)行數(shù)據(jù)的展示等,這里記錄一些常見的樣式修改

1、去掉默認(rèn)情況下前面的圓點(diǎn)

ul{list-style:none;}


2、橫向展示排列

li{float: left;}


3、修改為圓點(diǎn)之外的樣式

這里指定的是空心圓

li{
    /*float: left;*/
    list-style-type: circle;
}


下面給出其他類型:

描述
circle 空心圓
none 不使用
disc 默認(rèn),實(shí)心圓
square 實(shí)心方塊
decimal 阿拉伯?dāng)?shù)字
lower-roman 小寫羅馬數(shù)字
upper-alpha 大寫英文字母

4、更改圓點(diǎn)樣式為圖片

li{
    list-style-type:none;
    list-style-image: url(url);
}

CSS寫法:


HTML寫法:


點(diǎn)擊 CSS無(wú)序列表在線實(shí)例 在線實(shí)操一下吧~


1 人點(diǎn)贊