App下載

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

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

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

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

ul{list-style:none;}


2、橫向展示排列

li{float: left;}


3、修改為圓點之外的樣式

這里指定的是空心圓

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


下面給出其他類型:

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

4、更改圓點樣式為圖片

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

CSS寫法:


HTML寫法:


點擊 CSS無序列表在線實例 在線實操一下吧~


1 人點贊