CSS包含一组专门用于样式化HTML列表的属性。通过HTML列表，我的意思是ul和ol元素。在本文中，我将介绍这些列表样式CSS属性是什么，以及如何使用它们。

列表样式类型

" list-style-type" CSS属性控制" ul"元素使用的项目符号以及" ol"元素使用的编号。以下各节着眼于ul和ol元素。

list-style-type：ul

对于ul元素，我们可以使用以下属性值：

• disc
• circle
• square

这是我们为列表元素设置list-style-type的方法：

ul {
    list-style-type: disc;
}

这个例子将所有ul元素的list-style-typeCSS属性设置为disc。

这是应用于" ul"元素时可能的值(" disc"，" circle"和" square")的样子：

• disc
• circle
• square
  实际上，可以将list-style-type CSS属性应用于每个li元素，而不是整个ul元素。这是代码中的样子：

<ul>
    <li style="list-style-type: disc;"><code>disc</code></li>
    <li style="list-style-type: circle;"><code>circle</code></li>
    <li style="list-style-type: square;"><code>square</code></li>
</ul>

结果将类似于上面的示例，该示例显示了三种不同的项目符号类型(光盘，圆形和正方形)。

list-style-type：ol

list-style-typeCSS属性也可用于设置ol元素的样式。我们可以设置" ol"元素要使用的编号方式，而不是使用项目符号。 ol元素的list-style-type属性的有效值为：

• decimal
• decimal-leading-zero
• upper-alpha
• lower-alpha
• upper-roman
• lower-roman
• lower-greek

这是一个CSS规则，将list-style-type设置为upper-alpha：

ol {
    list-style-type : upper-alpha;
}

以下这些列表显示了带有6个不同可能值的数字方案的外观。

• decimal
• decimal
• decimal
• decimal-leading-zero
• decimal-leading-zero
• decimal-leading-zero
• upper-alpha
• upper-alpha
• upper-alpha
• lower-alpha
• lower-alpha
• lower-alpha
• upper-roman
• upper-roman
• upper-roman
• lower-roman
• lower-roman
• lower-roman
• upper-latin
• upper-latin
• upper-latin
• lower-latin
• lower-latin
• lower-latin
• lower-greek
• lower-greek
• lower-greek

列表样式位置

list-style-positionCSS属性用于设置项目符号或者数字的位置。 list-style-positionCSS属性可以采用以下两个值之一：

• 内部
• 外面

这是一个将list-style-position设置为outside的示例：

ul {
    list-style-position: outside;
}

这是两个无序列表，其中一个将" list-style-position"设置为" inside"，一个设置为" outside"。

• 该文本使用值" inside"，当列表项的文本跨越多行时，该值尤其明显。该文本使用值" inside"，当列表项的文本跨越多行时，该值尤其明显。
• 该文本使用值" inside"，当列表项的文本跨越多行时，该值尤其明显。该文本使用值" inside"，当列表项的文本跨越多行时，该值尤其明显。
• 该文本使用值outside。该文本使用值outside。该文本使用值outside。该文本使用值outside。
• 该文本使用值" outside"。该文本使用值" outside"。该文本使用值outside。该文本使用值outside。

注意值" inside"如何将项目符号作为列表项文本的一部分呈现。当列表项文本跨越多行时，该文本将环绕并在项目符号下方开始。

在外部vlue中，项目符号与文本分开呈现。当文本跨越多行时，文本将环绕并开始于文本(而不是项目符号)下方。

填充

我们可以通过设置li元素的填充CSS属性来增加项目符号或者数字与相应列表项的文本之间的距离。这是一个例子：

<ul>
    <li style="padding-left: 20px">With padding</li>
    <li>Without padding</li>
</ul>

本示例将" padding-left"设置为" 20px"。如果ul或者ol元素的list-style-position设置为outside(或者省略)，则设置li元素的padding-left属性将增加两个元素之间的间距。项目符号/编号和文字。这是实时的ul元素的外观：

• 带填充
• 没有填充

但是，如果ul或者ol元素的CSS属性的list-style-position属性设置为inside，则填充将在项目符号/编号之前应用，因为项目符号/编号被视为已呈现在li元素中。然后，将在" li"元素上设置的填充渲染到项目符号的左侧。这是在实时ul元素上的外观：

• 带填充
• 没有填充

padding CSS属性还可以用于设置各个li元素之间的距离。这是一个例子：

<style>
    ul>li {
        padding-bottom: 20px;
    }
</style>

<ul>
    <li>Item one</li>
    <li>Item two</li>
</ul>

本示例将每个列表项(" li"元素)的底部填充设置为" 20px"。因此，在每个li元素下方将有20px的空白。

这是如何将其应用于实时ul元素的：

• 第一项
• 第二项

在某些浏览器中，我们可能不得不使用margin CSS属性而不是padding CSS属性来使li元素之间保持距离。

列表样式图像

list-style-imageCSS属性可以设置一个图像，用作ul元素内的项目符号，而不是三个内置选项(disc，circle，square)。这是一个"列表样式图像"示例：

ul {
    list-style-image : url('/images/arrow-right.png');
}

这是一个ul元素的外观，具有那个list-style-image值：

• 一
• 二
• 三

列表项目上的背景图片

list-style-imageCSS属性无法控制用作项目符号的图像的位置。但是，如果将" list-style-type"设置为" none"，则默认情况下，列表中不会绘制任何项目符号。然后，我们可以在每个列表项上设置背景图像，并将该背景图像用作项目符号。这是一个列表项目(li)背景图片示例：

ul>li {
    padding-left        : 25px;
    background-image    : url('/images/arrow-right.png');
    background-position : 5px 5px;
    background-repeat   : no-repeat;
}

这是应用该CSS的列表的外观：

• 一
• 二
• 三

我们可以在我的有关在CSS中设置背景图像的教程中阅读有关为HTML元素设置背景图像的更多信息。

展示

我们可以使用display的CSS属性来更改列表的呈现方式。通过将" li"元素的" display"设置为" inline"，列表项将呈现为水平列表，而不是垂直列表。这是一个列表display：inline例子：

ul>li {
    display: inline;
}

列表呈现后的外观如下：

• 一
• 二
• 三

请注意，列表项"一个"，"第二"和"三个"现在如何呈现在同一水平线上，而不是每个项目都在其自己的线上。还请注意，不会显示项目符号。当浏览器在li元素上使用display：inline呈现列表时，这是默认行为。

我们也可以使用" inline-block"值代替" inline"。然后，我们可以设置li元素的宽度和高度(" display：inline`通常禁用对元素宽度和高度的控制)。这是一个例子：

ul>li {
    display: inline-block;
}

这是在将列表中的" li"元素上应用" display：inline-block"进行渲染时列表的外观：

• 一
• 二
• 三

正如预期的那样，它看起来与display：inline十分相似，但是可以通过CSS的width和height属性来控制li项的宽度和高度。这是一个将每个li元素的宽度设置为100px的示例：

ul>li {
    display: inline-block;
    width  : 100px;
}

这是呈现列表时的外观：

• 一
• 二
• 三

请注意，每个列表项现在如何占用宽度100像素。