列表属性

基本语法

list-style: type position image;

子属性

1. list-style-type(列表类型)

无序列表 `<ul>`

值	说明
`disc`	实心圆(默认)
`circle`	空心圆
`square`	实心方块
`none`	无标记

ul {
  list-style-type: disc;    /* 实心圆 */
  list-style-type: circle;  /* 空心圆 */
  list-style-type: square;  /* 实心方块 */
  list-style-type: none;    /* 无标记 */
}

有序列表 `<ol>`

值	说明
`decimal`	数字(1, 2, 3)(默认)
`decimal-leading-zero`	带前导零(01, 02, 03)
`lower-alpha`	小写字母(a, b, c)
`upper-alpha`	大写字母(A, B, C)
`lower-roman`	小写罗马数字(i, ii, iii)
`upper-roman`	大写罗马数字(I, II, III)

ol {
  list-style-type: decimal;              /* 1, 2, 3 */
  list-style-type: decimal-leading-zero; /* 01, 02, 03 */
  list-style-type: lower-alpha;          /* a, b, c */
  list-style-type: upper-alpha;          /* A, B, C */
  list-style-type: lower-roman;         /* i, ii, iii */
  list-style-type: upper-roman;         /* I, II, III */
}

2. list-style-position(列表位置)

值	说明
`outside`	标记在列表项外(默认)
`inside`	标记在列表项内

ul {
  list-style-position: outside;  /* 标记在外 */
  list-style-position: inside;   /* 标记在内 */
}

3. list-style-image(列表图片)

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

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>列表属性</title>
  <style>
    ul {
      list-style-type: none;
    }
    .custom-list {
      list-style-type: square;
    }
    .ordered {
      list-style-type: decimal;
    }
  </style>
</head>
<body>
  <!-- 去掉列表标记 -->
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <!-- 方块标记 -->
  <ul class="custom-list">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>

  <!-- 数字列表 -->
  <ol class="ordered">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>
</body>
</html>

复合写法

/* 完整写法 */
.custom {
  list-style: square inside url("image.png");
}

/* 简化写法 */
.custom {
  list-style: none;
}

实际应用

场景1: 去掉列表默认样式

ul, ol {
  list-style: none;
  padding-left: 0;
}

场景2: 导航菜单

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  margin-right: 20px;
}

场景3: 自定义列表样式

ul.custom {
  list-style: none;
  padding-left: 0;
}

ul.custom li {
  padding-left: 20px;
  position: relative;
}

ul.custom li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #007bff;
}

场景4: 带图片的列表

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

场景5: 树形结构

.tree ul {
  list-style: none;
  padding-left: 20px;
}

.tree li {
  position: relative;
}

.tree li::before {
  content: "├─ ";
  color: #ccc;
}

最佳实践

1. 重置默认样式

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

2. 自定义列表标记

ul {
  list-style: none;
}

ul li::before {
  content: "✓";
  color: green;
  margin-right: 8px;
}

3. 响应式列表

/* 桌面端横向显示 */
@media (min-width: 769px) {
  .horizontal-list {
    display: flex;
  }
  .horizontal-list li {
    margin-right: 20px;
  }
}

/* 移动端纵向显示 */
@media (max-width: 768px) {
  .horizontal-list {
    display: block;
  }
  .horizontal-list li {
    margin-bottom: 10px;
  }
}