层叠样式表/列表

`list-style-type`

list-style-type 属性设置列表项目开头使用的标记。标记可以是计数器或项目符号。有几种不同的项目符号可用。在 CSS1 或 CSS2.1 中定义的值在下面的列表中显示。列表中每个值的标记应以该样式呈现。您的浏览器可能不支持所有项目符号类型，在这种情况下，您可能会看到一个圆盘代替任何不支持的值。

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

decimal-leading-zero，在 CSS2.1 中定义。

lower-latin，在 CSS2.1 中定义。

upper-latin，在 CSS2.1 中定义。

armenian，在 CSS2.1 中定义，但有可能被删除

georgian，在 CSS2.1 中定义，但有可能被删除.

lower-greek，在 CSS2.1 中定义，但有可能被删除.

none

list-style-type 可以应用于列表容器元素（在 HTML 中为 ul 或 ol）以及列表项目元素（在 HTML 中为 li）。CSS 规则

ul {
  list-style-type:disc
}

示例 HTML

    <ul>
      <li>Item A</li>
      <li>Item B
        <ul>
          <li>Item B1</li>
          <li>Item B2
            <ul>
              <li>Item B2a</li>
              <li>Item B2b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

示例渲染

项目 A
项目 B
- 项目 B1
- 项目 B2
  - 项目 B2a
  - 项目 B2b

请注意，子列表中的所有项目符号都是圆盘。如果您希望子列表具有不同的类型，则需要额外的规则，例如

ul {
  list-style-type:disc
}

ul ul {
  list-style-type:circle
}

ul ul ul {
  list-style-type:square
}

示例渲染

项目 A
项目 B
- 项目 B1
- 项目 B2
  - 项目 B2a
  - 项目 B2b

`list-style-image`

W3C 规范 CSS1 CSS2.1

list-style-image 属性允许您指定要作为列表项目项目符号使用的图像。该值是 URI 或 none。当该值为 none 时，项目符号将由 list-style-type 属性设置。当它是一个 URI 时，Web 浏览器将尝试从给定的 URI 加载图像。如果成功，它将使用该图像作为项目符号。如果失败，它将使用 list-style-type 属性指定的项目符号。

下面的示例显示了一个列表，其中红色和绿色项目符号交替出现。

CSS 规则

li.odd{
  list-style-image: url(green_bullet.gif)
}

li.even {
  list-style-image: url(red_bullet.gif)
}

示例 HTML

    <ul>
      <li class="odd">Item 1</li>
      <li class="even">Item 2</li>
      <li class="odd">Item 3</li>
      <li class="even">Item 4</li>
    </ul>

示例渲染

• 项目 1

• 项目 2

• 项目 3

• 项目 4

`list-style-position`

W3C 规范 CSS1 CSS2.1

list-style-position 属性确定列表项目的项目符号是否被视为列表项目内容的一部分（inside）还是放置在块之外（outside）。大多数 Web 浏览器将项目符号放置在 (X)HTML 列表的外部。

CSS 规则

li {
  border: 1px solid red
}

ul#inner {
  list-style-position: inside
}

ul#outer {
  list-style-position: outside
}

示例 HTML

    <p>The first list has the bullets on the inside.&lt;/p>
    <ul id="inner">
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
    </ul>
    <p>The second list has the bullets on the outside. This is the default.&lt;/p>
    <ul id="outer">
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
      <li>This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
        This text needs to be long enough to wrap on to the next line.
      </li>
    </ul>

示例渲染 - 注意文本相对于项目符号和边框的换行位置。

第一个列表的项目符号在内部。

此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。
此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。
此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。

第二个列表的项目符号在外部。这是默认设置。

此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。
此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。
此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。此文本需要足够长才能换行到下一行。

下一个示例显示了当项目符号在内部时，更改边距或填充如何影响项目符号的位置。由于项目符号在内容内部，因此填充出现在边框和项目符号之间。

边距 0
边距 1em
边距 2em
填充 0
填充 1em
填充 2em

下一个示例显示了当项目符号在外部时，更改边距或填充如何影响项目符号的位置。由于它在内容外部，因此它相对于边框保持在相同的位置。

边距 0
边距 1em
边距 2em
填充 0
填充 1em
填充 2em

简写属性

W3C 规范 CSS1 CSS2.1

list-style 简写属性可用于在一个声明中设置所有三个单独的列表样式属性。

规则

ul {
  list-style:circle url(wavy_circle.png) inside
}

等效于

ul {
  list-style-type:circle;
  list-style-image:url(wavy_circle.png);
  list-style-position:inside
}

各个属性可以按任何顺序给出，因此以下声明都是等效的。

  list-style:circle url(wavy_circle.png) inside;
  list-style:url(wavy_circle.png) circle inside;
  list-style:inside circle url(wavy_circle.png);

如果省略了任何单个属性，它们将设置为其初始值。例如

ul {
  list-style:url(wavy_circle.png)
}

等效于

ul {
  list-style-image:url(wavy_circle.png);
  list-style-type:disc; /* initial value */
  list-style-position:outside /* initial value */
}