[分享]css 文字前面黑点

CSS里有一个非常实用的属性可以让我们在文字前面加上黑点，这个属性就是liststyle。这个属性有几种常用的取值，下面我们来逐个介绍。ul { liststyle: disc; / 实心黑点，默认的...

CSS里有一个非常实用的属性可以让我们在文字前面加上黑点，这个属性就是list-style。这个属性有几种常用的取值，下面我们来逐个介绍。

ul {
list-style: disc; /* 实心黑点，默认的取值 */
}
ol {
list-style: decimal; /* 数字，从1开始递增 */
}
li {
list-style: square; /* 实心方块 */
}

除了这三个取值之外，还有一些其他的取值，例如list-style-type:none可以取消黑点，list-style-position:inside可以让黑点紧贴文字。需要注意的是，这些属性只能作用于li元素。

我们也可以给ul、ol设置margin和padding等属性来调整黑点的位置和间距。

ul {
list-style: disc;
margin-left: 20px; /* 左侧空出20像素 */
padding-left: 0; /* 内容区域不缩进 */
}
ol {
list-style: decimal;
margin-left: 30px; /* 左侧空出30像素 */
padding-left: 20px; /* 内容区域向左缩进20像素 */
}

这样，我们就可以灵活地控制黑点的样式和排版了。