CSS 列表

无序列表：

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

有序列表：

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

  • 无序列表（<ul>）- 列表项用的是项目符号标记
  • 有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性使您可以：

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色

不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

实例

  1. ul.a {
  2.   list-style-type: circle;
  3. }
  5. ul.b {
  6.   list-style-type: square;
  7. }
  9. ol.c {
  10.   list-style-type: upper-roman;
  11. }
  13. ol.d {
  14.   list-style-type: lower-alpha;
  15. }

注释：有些值用于无序列表，而有些值用于有序列表。

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

实例

  1. ul {
  2.   list-style-image: url('sqpurple.gif');
  3. }

定位列表项标记

list-style-position 属性指定列表项标记（项目符号）的位置。

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

实例

  1. ul.a {
  2.   list-style-position: outside;
  3. }
  5. ul.b {
  6.   list-style-position: inside;
  7. }

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：

实例

  1. ul {
  2.   list-style-type: none;
  3.   margin: 0;
  4.   padding: 0;
  5. }

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

实例

  1. ul {
  2.   list-style: square inside url("sqpurple.gif");
  3. }

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

实例

  1. ol {
  2.   background: #ff9999;
  3.   padding: 20px;
  4. }
  6. ul {
  7.   background: #3399ff;
  8.   padding: 20px;
  9. }
  11. ol li {
  12.   background: #ffe5e5;
  13.   padding: 5px;
  14.   margin-left: 35px;
  15. }
  17. ul li {
  18.   background: #cce5ff;
  19.   margin: 5px;
  20. }

结果：

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

更多实例

带红色左边框的自定义列表

本例演示如何创建带有红色左边框的列表。

  1. <head>
  2. <style>
  3. ul {
  4.   border-left: 5px solid red;
  5.   background-color: #f1f1f1;
  6.   list-style-type: none;
  7.   padding: 10px 20px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  13. <p>左边框为红色的列表：</p>
  14. <ul>
  15.   <li>Coffee</li>
  16.   <li>Tea</li>
  17.   <li>Coca Cola</li>
  18. </ul>
  20. </body>

全屏宽度的边框列表

本例演示如何创建没有项目符号的带边框列表。

  1. <head>
  2. <style>
  3. ul {
  4.   list-style-type: none;
  5.   padding: 0;
  6.   border: 1px solid #ddd;
  7. }
  9. ul li {
  10.   padding: 8px 16px;
  11.   border-bottom: 1px solid #ddd;
  12. }
  14. ul li:last-child {
  15.   border-bottom: none
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <p>全宽的带边框的列表：</p>
  22. <ul>
  23.   <li>Coffee</li>
  24.   <li>Tea</li>
  25.   <li>Coca Cola</li>
  26. </ul>
  28. </body>

列表的所有不同列表项标记

本例演示了 CSS 中所有不同的列表项标记。

  1. <head>
  2. <style>
  3. ul.a {list-style-type: circle;}
  4. ul.b {list-style-type: disc;}
  5. ul.c {list-style-type: square;}
  7. ol.d {list-style-type: armenian;}
  8. ol.e {list-style-type: cjk-ideographic;}
  9. ol.f {list-style-type: decimal;}
  10. ol.g {list-style-type: decimal-leading-zero;}
  11. ol.h {list-style-type: georgian;}
  12. ol.i {list-style-type: hebrew;}
  13. ol.j {list-style-type: hiragana;}
  14. ol.k {list-style-type: hiragana-iroha;}
  15. ol.l {list-style-type: katakana;}
  16. ol.m {list-style-type: katakana-iroha;}
  17. ol.n {list-style-type: lower-alpha;}
  18. ol.o {list-style-type: lower-greek;}
  19. ol.p {list-style-type: lower-latin;}
  20. ol.q {list-style-type: lower-roman;}
  21. ol.r {list-style-type: upper-alpha;}
  22. ol.s {list-style-type: upper-latin;}
  23. ol.t {list-style-type: upper-roman;}
  24. ol.u {list-style-type: none;}
  25. ol.v {list-style-type: inherit;}
  26. </style>
  27. </head>
  28. <body>
  30. <ul class="a">
  31.   <li>Circle type</li>
  32.   <li>Tea</li>
  33.   <li>Coca Cola</li>
  34. </ul>
  36. <ul class="b">
  37.   <li>Disc type</li>
  38.   <li>Tea</li>
  39.   <li>Coca Cola</li>
  40. </ul>
  42. <ul class="c">
  43.   <li>Square type</li>
  44.   <li>Tea</li>
  45.   <li>Coca Cola</li>
  46. </ul>
  48. <ol class="d">
  49.   <li>Armenian type</li>
  50.   <li>Tea</li>
  51.   <li>Coca Cola</li>
  52. </ol>
  54. <ol class="e">
  55.   <li>Cjk-ideographic type</li>
  56.   <li>Tea</li>
  57.   <li>Coca Cola</li>
  58. </ol>
  60. <ol class="f">
  61.   <li>Decimal type</li>
  62.   <li>Tea</li>
  63.   <li>Coca Cola</li>
  64. </ol>
  66. <ol class="g">
  67.   <li>Decimal-leading-zero type</li>
  68.   <li>Tea</li>
  69.   <li>Coca Cola</li>
  70. </ol>
  72. <ol class="h">
  73.   <li>Georgian type</li>
  74.   <li>Tea</li>
  75.   <li>Coca Cola</li>
  76. </ol>
  78. <ol class="i">
  79.   <li>Hebrew type</li>
  80.   <li>Tea</li>
  81.   <li>Coca Cola</li>
  82. </ol>
  84. <ol class="j">
  85.   <li>Hiragana type</li>
  86.   <li>Tea</li>
  87.   <li>Coca Cola</li>
  88. </ol>
  90. <ol class="k">
  91.   <li>Hiragana-iroha type</li>
  92.   <li>Tea</li>
  93.   <li>Coca Cola</li>
  94. </ol>
  96. <ol class="l">
  97.   <li>Katakana type</li>
  98.   <li>Tea</li>
  99.   <li>Coca Cola</li>
  100. </ol>
  102. <ol class="m">
  103.   <li>Katakana-iroha type</li>
  104.   <li>Tea</li>
  105.   <li>Coca Cola</li>
  106. </ol>
  108. <ol class="n">
  109.   <li>Lower-alpha type</li>
  110.   <li>Tea</li>
  111.   <li>Coca Cola</li>
  112. </ol>
  114. <ol class="o">
  115.   <li>Lower-greek type</li>
  116.   <li>Tea</li>
  117.   <li>Coca Cola</li>
  118. </ol>
  120. <ol class="p">
  121.   <li>Lower-latin type</li>
  122.   <li>Tea</li>
  123.   <li>Coca Cola</li>
  124. </ol>
  126. <ol class="q">
  127.   <li>Lower-roman type</li>
  128.   <li>Tea</li>
  129.   <li>Coca Cola</li>
  130. </ol>
  132. <ol class="r">
  133.   <li>Upper-alpha type</li>
  134.   <li>Tea</li>
  135.   <li>Coca Cola</li>
  136. </ol>
  138. <ol class="s">
  139.   <li>Upper-latin type</li>
  140.   <li>Tea</li>
  141.   <li>Coca Cola</li>
  142. </ol>
  144. <ol class="t">
  145.   <li>Upper-roman type</li>
  146.   <li>Tea</li>
  147.   <li>Coca Cola</li>
  148. </ol>
  150. <ol class="u">
  151.   <li>None type</li>
  152.   <li>Tea</li>
  153.   <li>Coca Cola</li>
  154. </ol>
  156. <ol class="v">
  157.   <li>inherit type</li>
  158.   <li>Tea</li>
  159.   <li>Coca Cola</li>
  160. </ol>
  162. </body>

所有 CSS 列表属性

属性 描述
list-style 简写属性。在一条声明中设置列表的所有属性。
list-style-image 指定图像作为列表项标记。
list-style-position 规定列表项标记（项目符号）的位置。
list-style-type 规定列表项标记的类型。