17370845950

list-style-type：设置项目符号或编号类型

list-style-type 属性用于定义列表项前的标记样式。不同的列表类型对应不同的视觉符号。

• disc：实心圆点（默认无序列表样式）
• circle：空心圆圈
• square：实心方块
• decimal：阿拉伯数字（1, 2, 3...），有序列表默认
• lower-roman：小写罗马数字（i, ii, iii...）
• upper-alpha：大写英文字母（A, B, C...）
• none：不显示任何标记，常用于导航菜单等去样式场景

示例：

ul { list-style-type: square; }
ol { list-style-type: lower-roman; }

list-style-position：控制标记的位置

list-style-position 决定列表标记（如圆点或数字）相对于列表项内容的位置。

• inside：标记位于列表项内容内部，与文本在同一行起始处对齐
• outside：标记位于列表项外部，默认行为，通常由浏览器处理缩进

区别说明：

• 使用 inside 时，文本可能与标记对齐更紧密，适合需要精确排版的场景
• 使用 outside 时，标记不占内容流位置，列表整体缩进更自然

示例：

ul {
  list-style-type: disc;
  list-style-position: inside;
}

简写属性：list-style

你可以用 list-style 一次性设置 type、position，甚至 image（图片标记）。

ul {
  list-style: square inside;
}
ol {
  list-style: upper-alpha outside;
}

顺序不限，但推荐先 type 后 position。如果省略其中一个，将使用默认值。