[分享]css中无序列表特点

CSS中的无序列表是一种非常实用的排版方式，通过添加样式可以让列表更加美观和易于阅读，下面我们来介绍一下无序列表的几个特点：ul { liststyle: none; / 去掉默认样式 / margi...

CSS中的无序列表是一种非常实用的排版方式，通过添加样式可以让列表更加美观和易于阅读，下面我们来介绍一下无序列表的几个特点：

ul {
  list-style: none; /* 去掉默认样式 */
  margin: 0;
  padding: 0;
}

li {
  margin: 0 0 10px 20px; /* 调整列表项与左边缘的距离 */
} 

1. 去掉默认样式

在CSS中，无序列表默认会显示为小圆点，如果需要改变样式，可以使用list-style属性。通常情况下，我们会将其设置为none，这样就可以去掉默认样式了。

2. 调整间距

在默认情况下，无序列表项之间都是间隔一定距离的，而且左边缘与文本的距离也是一定的。如果需要调整列表项之间的距离或与左边缘的距离，可以通过margin属性来实现。一般情况下，我们会将左边缘的距离设为20px，使其与文本对齐。

3. 自定义样式

通过修改list-style属性的值，可以实现自定义样式。例如，将其设为square可以使列表项变为正方形，设为circle则会变成空心圆点，还可以使用图片代替默认样式，如下所示：

ul {
  list-style: url('bullet.png');
} 

总之，通过添加样式，无序列表可以变得更加美观和易于阅读。我们可以根据需要自由地调整样式，不必受限于默认设置，从而实现更加个性化的列表效果。