前端开发时常会用到无序列表（​ul​ ​li​） 来进行数据的展示等，这里记录一些常见的样式修改

1、去掉默认情况下前面的圆点

ul{list-style:none;}

2、横向展示排列

li{float: left;}

3、修改为圆点之外的样式

这里指定的是空心圆

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

下面给出其他类型：

值	描述
circle	空心圆
none	不使用
disc	默认，实心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
upper-alpha	大写英文字母

• 参考资料：https://www.w3cschool.cn/css/css-list.html

4、更改圆点样式为图片

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

• 参考资料：https://www.w3cschool.cn/cssref/pr-list-style-image.html

CSS写法：

HTML写法：

点击 CSS无序列表在线实例 在线实操一下吧~