App下載

在html中如何修改無序列表ul和li的格式呢？

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

前端開發(fā)時(shí)常會(huì)用到無序列表（?ul? ?li?） 來進(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無序列表在線實(shí)例 在線實(shí)操一下吧~


HTML

1 人點(diǎn)贊