如何使用CSS对列表进行样式设计

210 阅读1分钟

列表是许多网页的一个非常重要的部分。

CSS可以使用几个属性对它们进行样式设计。

list-style-type 是用来设置列表所使用的预定义标记的。

li {
  list-style-type: square;
}

我们有很多可能的值,你可以在这里看到developer.mozilla.org/en-US/docs/…,并举例说明其外观。一些最流行的是disc,circle,squarenone

list-style-image 当预定义的标记不合适时,用于使用一个自定义的图像作为标记。

li {
  list-style-image: url(list-image.png);
}

list-style-position 让你在列表内容中添加标记 (默认)或 ,在页面的流程中,而不是在页面的外部。outside inside

li {
  list-style-position: inside;
}

list-style 简称属性让我们在同一行中指定所有这些属性。

li {
  list-style: url(list-image.png) inside;
}