正在加载...
CSS 列表
list-style 工具箱
📊 一眼看清列表样式
| 属性 | 日常用途 |
|---|---|
list-style-type |
标记形状或编号样式（disc、square、decimal…） |
list-style-position |
标记在内容盒内侧还是外侧 |
list-style-image |
用图片作为标记 |
list-style |
type、position 与 image 的简写 |
list-style: none |
去掉标记（导航菜单常用） |
标记属于列表项，但你通常把列表样式写在 ul 或 ol 上，让每个 li 继承同一外观。
项目符号类型
无序列表常从 disc 开始。设计需要更安静或更利落的标记时，改用 circle 或 square。
项目符号类型
css
CSS Code
ul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}编号与字母列表
有序列表使用编号样式。decimal 是日常选择；lower-alpha 或 upper-roman 适合大纲和正式步骤。
有序列表类型
css
CSS Code
ol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}标记位置 — 内侧或外侧
list-style-position: outside（常见默认）把标记挂在边距里。inside 把它收进文字流 — 窄卡片里很有用。
流内标记
css
CSS Code
ul.card-list {
list-style-position: inside;
padding-left: 0;
}为菜单去掉标记
导航列表很少需要项目符号。list-style: none 清掉它们 — 再用 padding/margin 自己加间距。
干净的导航列表
css
CSS Code
nav ul {
list-style: none;
margin: 0;
padding: 0;
}图片标记与简写
小图片可以替代项目符号。优先用很小的资源。list-style 简写可在一行里设置 type、position 和 image。
图片标记 + 简写
css
CSS Code
ul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}平静的列表习惯
每个列表选一种清晰标记样式，图片标记保持很小，菜单用 none 后重置 padding，让项目干净对齐。
可读的文章列表
css
CSS Code
article ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}自己动手
- 把某个
ul设为list-style-type: square。 - 用
lower-alpha设置某个ol。 - 在短卡片列表上设
list-style-position: inside。 - 用
list-style: none和零 padding 去掉nav ul的符号。 - 试一个很小的
list-style-image；图片失败再退回 type。
常见错误
- 指望只在
li上设color就能处处改自定义标记 - 用了
list-style: none却留下很大的默认 padding，看起来坏掉 - 巨大的
list-style-image文件压过整行 - 顺序重要时用 CSS 给
ul编号，而不是语义化的ol - 把本课与链接的 hover/visited 状态混在一起（上一课）
小结
list-style-type选择项目符号或编号样式list-style-position把标记放在内侧或外侧list-style: none为菜单清除标记list-style-image与list-style简写提供额外选项- 标记保持克制；去掉符号后有意设置 padding
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
7
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部