前端开发时常会用到无序列表（​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 大写英文字母

4、更改圆点样式为图片

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

CSS写法：

HTML写法：

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。