CSS - 列表_CSS 菜鸟教程

列表很有用，因为它们以结构化和有组织的方式呈现信息。列表提高了网页上内容的可读性和理解力。因此，如果列出了内容，则很容易遵循。

列表通常用于显示应按顺序或成组显示的项目、步骤、选项或任何其他类型的相关信息。

本章将讨论如何使用 CSS 控制列表类型、位置、样式等。在此之前，让我们在以下各节中了解 HTML 列表有何不同。

HTML 列表

HTML主要提供两种列表 - <ol>（有序列表）和<ul>（无序列表）：

有序列表（<ol>）

当项目需要按特定顺序显示时，将使用有序列表。通常用于过程、步骤、说明或任何与订单相关的信息序列。

语法

<ol class="list">
	 	 <li></li>
</ol>

无序列表（<ul>）

当项的顺序无关紧要，并且您希望将项显示为一个组时，将使用无序列表。通常用于功能、优势、选项或任何非顺序信息的列表。

<ul class="list">
	 	 <li></li>
</ul>

例子

让我们看一下两种列表（没有CSS）的示例：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 	 <style>
	 	 	 	 	 	 h2 {margin-bottom: 5px;}
	 	 	 	 </style>
	 	 </head>
	 	 <body>
	 	 	 	 <div>
	 	 	 	 	 	 <h2>Ordered list</h2>
	 	 	 	 	 	 <ol class="list">
	 	 	 	 	 	 	 	 <li>The list is ordered.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need to follow a sequence.</li>
	 	 	 	 	 	 	 	 <li>The points are numbered.</li>
	 	 	 	 	 	 </ol>
	 	 	 	 	 	 <h2>Unordered list</h2>
	 	 	 	 	 	 <ul class="list">
	 	 	 	 	 	 	 	 <li>The list is unordered.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 	 	 	 	 <li>The points are bulleted.</li>
	 	 	 	 	 	 </ul>
	 	 	 	 </div>
	 	 </body>
</html>

列表 - CSS 属性

CSS 提供了一组可以应用于任何列表的属性，如下所示：

list-style-type 允许您控制标记的形状或外观。
list-style-position 指定包裹到第二行的长点是应与第一条线对齐，还是应从标记起点下方开始。
list-style-image 指定标记的图像，而不是项目符号或数字。
list-style 用作上述属性的简写。

列表或项目符号样式的项目标记

要更改用于列表项的标记类型，可以使用属性 list-style-type。相同的属性可用于有序列表和无序列表。

让我们看一个例子：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 	 <style>
	 	 	 	 	 	 h2 { margin-bottom: 5px; }
	 	 	 	 	 	 ol.o1 { list-style-type: lower-roman; }
	 	 	 	 	 	 ol.o2 { list-style-type: upper-alpha; }
	 	 	 	 	 	 ul.u1 { list-style-type:square; }
	 	 	 	 	 	 ul.u2 { list-style-type: circle; }
	 	 	 	 </style>
	 	 </head>
	 	 <body>
	 	 	 	 <div>
	 	 	 	 	 	 <h2>Ordered list - Item markers</h2>
	 	 	 	 	 	 <ol class="o1">
	 	 	 	 	 	 	 	 <li>The item marker is lower-roman.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need to follow a sequence.</li>
	 	 	 	 	 	 </ol>
	 	 	 	 	 	 <ol class="o2">
	 	 	 	 	 	 	 	 <li>The item marker is upper-alpha.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need to follow a sequence.</li>
	 	 	 	 	 	 </ol>
	 	 	 	 	 	 <h2>Unordered list - Item markers</h2>
	 	 	 	 	 	 <ul class="u1">
	 	 	 	 	 	 	 	 <li>The item marker is square.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 	 	 </ul>
	 	 	 	 	 	 <ul class="u2">
	 	 	 	 	 	 	 	 <li>The item marker is circle.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 	 	 </ul>
	 	 	 	 </div>
	 	 </body>
</html>

下表列出了可用于属性 list-style-type 的可能值：

值	描述	示例
none	NA	NA
disc (default)	一个填充的圆圈
circle	一个空的圆圈
square	一个填充的正方形
decimal	数字	1, 2, 3, 4, 5, ...
decimal-leading-zero	0 在数字之前	01, 02, 03, 04, 05, ...
lower-alpha	小写字母数字字符	a, b, c, d, e, ...
upper-alpha	大写字母数字字符	A, B, C, D, E, ...
lower-roman	小写罗马数字	i, ii, iii, iv, v, ...
upper-roman	大写罗马数字	I, II, III, IV, V, ...
lower-greek	标记是低希腊语	alpha, beta, gamma, ...
lower-latin	标记是低拉丁语	a, b, c, d, e, ...
upper-latin	标记是大拉丁字母	A, B, C, D, E, ...
hebrew	标记是传统的希伯来语编号
armenian	标记是传统的亚美尼亚编号
georgian	标记是传统的格鲁吉亚编号
cjk-ideographic	标记是普通的表意数字
hiragana	标记是日本编号 - 平假名	a, i, u, e, o, ka, ki
katakana	标记是日本编号 - 片假名	A, I, U, E, O, KA, KI
hiragana-iroha	标记是日本编号（hiragana-iroha）	i, ro, ha, ni, ho, he, to
katakana-iroha	标记是日本编号（片假名-iroha）	I, RO, HA, NI, HO, HE, TO

list-style-type 属性以及所有其他与列表相关的属性可以是仅适用于显示列表项的元素，但 CSS 不区分有序和无序列表项。

用户代理可以禁止将有序标记应用于无序列表，反之亦然。你不能指望这个，所以要小心。

项目列表标记 - 图像（使用自定义项目符号图像）

您可能更喜欢使用图像作为项目列表标记。list-style-image 属性可用于将图像指定为项目列表标记。

您可以使用自己的项目符号样式。如果未找到图像，则返回默认项目符号。

语法

ul { list-style-image: url('URL') }

让我们看一个例子：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 	 <style>
	 	 	 	 	 	 h2 { margin-bottom: 5px; }
	 	 	 	 	 	 div { padding: 5px; margin-left: 100px;}
	 	 	 	 	 	 ul { list-style-image: url('/images/bullet.gif') }
	 	 	 	 </style>
	 	 </head>
	 	 <body>
	 	 	 	 <div>
	 	 	 	 	 	 <h2>Unordered list - Image as item marker</h2>
	 	 	 	 	 	 <ul>
	 	 	 	 	 	 	 	 <li>The item marker is square.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 	 	 </ul>
	 	 	 	 	 	 <ul>
	 	 	 	 	 	 	 	 <li>The item marker is circle.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 	 	 </ul>
	 	 	 	 </div>
	 	 </body>
</html>

要记住的要点：

建议为图像提供替代方法作为列表标记，以便在图像未加载或损坏的情况下，用户可以使用回退选项。

语法：

ul { list-style-image: url('URL'); 
list-style-type: circle / square; }

语法：

如果您不希望图像成为嵌套列表的标记，请为嵌套列表项指定 list-style-image： none。

语法：

ul { list-style-image: url('URL'); list-style-type: circle / square; }
ul ul { list-style-image: none; }

以上几点在以下示例中进行了演示：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 	 <style>
	 	 	 	 	 	 h2 { margin-bottom: 5px; }
	 	 	 	 	 	 div { padding: 5px; margin-left: 100px;}
	 	 	 	 	 	 ul { list-style-image: url('/images/bullet.gif') }
	 	 	 	 	 	 ul ul { list-style-image: none; }
	 	 	 	 </style>
	 	 </head>
	 	 <body>
	 	 	 	 <div>
	 	 	 	 	 	 <h2>Unordered list - Image as item marker</h2>
	 	 	 	 	 	 <ul>
	 	 	 	 	 	 	 	 <li>The item marker is an image.</li>
	 	 	 	 	 	 	 	 <li>It is used in cases where we need use images.
	 	 	 	 	 	 	 	 	 	 	<ul>
	 	 	 	 	 	 	 	 	 	 	 	 <li>The item marker is a circle.</li>
	 	 	 	 	 	 	 	 	 	 	 	 <li>this demonstrates skipping image marker for sub item list.</li>
	 	 	 	 	 	 	 	 	 	 </ul>
	 	 	 	 	 	 	 	 </li>
	 	 	 	 	 	 </ul>

	 	 	 	 </div>
	 	 </body>
</html>

列表项标记 - 位置或项目符号位置

list-style-position 属性指示标记应显示在包含项目符号的框的内部还是外部。它可以具有以下值之一 -

Sr.No.	值	描述
1	none	NA
2	inside	如果文本进入第二行，则文本将包裹在标记下方。它还将具有适当的缩进。
3	outside	如果文本进入第二行，则文本将与第一行的开头（项目符号右侧）对齐。
4	inherit	继承父列表的属性。

让我们看下面的一个示例，其中从列表中删除了填充，并添加了左侧红色边框：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 	 <style>
	 	 	 	 body {
	 	 	 	 	 padding-left: 50px;
	 	 	 	 }

	 	 	 	 ul:nth-of-type(1) {
	 	 	 	 	 list-style-position: inside;
	 	 	 	 	 padding: 0;
	 	 	 	 	 border-left: solid 2px red;
	 	 	 	 }

	 	 	 	 ul:nth-of-type(2) {
	 	 	 	 	 list-style-position: outside;
	 	 	 	 	 padding: 0;
	 	 	 	 	 border-left: solid 2px red;
	 	 	 	 }
	 	 	 	 </style>
	 </head>
	 <body>
	 	 	<h2>List style position</h2>
	 	 	<div>
	 	 	 	 <ul style = "list-style-type:circle; list-style-position:outside;">
	 	 	 	 	 	 <li>The item marker is circle, with style position as outside. Let us see where the bullet is lying.</li>
	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 </ul>
	 	 </div>
	 	 <div>
	 	 	 	 <ul style = "list-style-type:square; list-style-position:inside;">
	 	 	 	 	 	 <li>The item marker is square, with style position as inside. Let us see where the bullet is lying.</li>
	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 </ul>
	 	 </div>
	 </body>
</html>

list-style - Shorthand 属性

列表样式允许您将所有三个列表属性指定到一个表达式中。

以下是 list-style 可以保存的值：

<list-style-type>
<list-style-image>
<list-style-position>

要记住的要点：

传递给列表样式的值的顺序不是固定的。
这三个值中的任何一个都可以省略。
如果缺少任何值，则将由相同的默认值填充。但是必须至少传递一个值。

让我们看一个例子：

<!DOCTYPE html>
<html>
	 	<head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 	 <style>
	 	 	 	 	 	 div { border: 2px solid; width: 500px;}
	 	 	 	 </style>
	 </head>
	 <body>
	 	 	<h2>List style - shorthand</h2>
	 	 	<h3>Three values passed</h3>
	 	 	 	 <ul style = "list-style: url('C:/WORK/CSS/tp-css/images/try-it.jpg') circle outside;">
	 	 	 	 	 	 <li>The item marker is an image, position as outside. In absence of image, the marker will be a circle.
	 	 	 	 	 	 	 	 Try not loading the image and see the type as circle.</li>
	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 </ul>

	 	 	 	 <h3>Two values passed</h3>
	 	 	 	 <ul style = "list-style: square inside">
	 	 	 	 	 	 <li>The item marker is square, with style position as inside and no image.</li>
	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 </ul>

	 	 	 	 <h3>One value passed</h3>
	 	 	 	 <ul style = "list-style: disc">
	 	 	 	 	 	 <li>The item marker is disc, with style position as outside (default) and no image (default - none).</li>
	 	 	 	 	 	 <li>It is used in cases where we need not follow a sequence.</li>
	 	 	 	 </ul>
	 </body>
</html>

受控列表计数

有时，我们可能希望在有序列表上以不同的方式计数——例如，从不是 1 的数字开始，或者倒数，或者以超过 1 的步长计数。HTML 和 CSS 在这里有一些工具可以帮助您。

开始

start 属性允许您从非 1 的数字开始计数列表，如以下示例所示：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">

	 </head>
	 <body>
	 	 	<h2>Controlled counting using start</h2>
	 	 	<ol start="4">
	 	 	 	 	 <li>Java.</li>
	 	 	 	 	 <li>HTML.</li>
	 	 	 	 	 <li>CSS.</li>
	 	 	 	 	 <li>React.</li>
	 	 	 </ol>
	 </body>
</html>

反向

reversed 属性将开始反向或向下计数列表，而不是向上计数，如以下示例所示：

	 <!DOCTYPE html>
	 <html>
	 	 	 <head>
	 	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 	 <meta charset="UTF-8">
	 	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">

	 	 </head>
	 	 <body>
	 	 	 	<h2>Controlled counting using start</h2>
	 	 	 	<ol start="4" reversed>
	 	 	 	 	 	 <li>Java.</li>
	 	 	 	 	 	 <li>HTML.</li>
	 	 	 	 	 	 <li>CSS.</li>
	 	 	 	 	 	 <li>React.</li>
	 	 	 	 </ol>
	 	 </body>
	 </html>

价值

value 属性允许您将列表项设置为特定的数值，如以下示例所示：

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 	 <title>CSS - Lists</title>
	 	 	 	 <meta charset="UTF-8">
	 	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">

	 </head>
	 <body>
	 	 	<h2>Controlled counting using start</h2>
	 	 	<ol start="4" reversed>
	 	 	 	 	 <li value="2">Java.</li>
	 	 	 	 	 <li value="3">HTML.</li>
	 	 	 	 	 <li value="1">CSS.</li>
	 	 	 	 	 <li value="4">React.</li>
	 	 	 </ol>
	 </body>
</html>

使用颜色设置列表样式

我们可以使用一些样式使列表看起来更加时尚和丰富多彩，如以下示例所示。正如我们所看到的，添加到 <ul> 或 <ol> 标签的任何样式都会影响整个列表，而添加到单个 <li> 标签只会影响相应列表的项目。

<!DOCTYPE html>
<html>
	 	 <head>
	 	 	 <title>CSS - Lists</title>
	 	 	 <meta charset="UTF-8">
	 	 	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
	 	 	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	 	 	 <style>
	 	 	 ol{
	 	 	 	 list-style: upper-latin;
	 	 	 	 background: Aquamarine;
	 	 	 	 padding:20px;
	 	 	 }
	 	 	 ol li{
	 	 	 	 background: silver;
	 	 	 	 padding:10px;
	 	 	 	 font-size:20px;
	 	 	 	 margin:10px;
	 	 	 }
	 	 	 ul{
	 	 	 	 list-style: square inside;
	 	 	 	 background: teal;
	 	 	 	 padding:20px;
	 	 	 }
	 	 	 ul li{
	 	 	 	 background: olive;
	 	 	 	 color:white;
	 	 	 	 padding:10px;
	 	 	 	 font-size:20px;
	 	 	 	 margin:10px;
	 	 	 }
	 	 </style>
	 </head>
	 <body>
	 	 	<h2>Controlled counting using start</h2>
	 	 	<ol>
	 	 	 	 	 <li>Java.</li>
	 	 	 	 	 <li>HTML.</li>
	 	 	 	 	 <li>CSS.</li>
	 	 	 	 	 <li>React.</li>
	 	 	 </ol>
	 	 	 <ul>
	 	 	 	 	 <li>Java.</li>
	 	 	 	 	 <li>HTML.</li>
	 	 	 	 	 <li>CSS.</li>
	 	 	 	 	 <li>React.</li>
	 	 	 </ul>
	 </body>
</html>

<< CSS - 边距 CSS - Padding (填充)属性 >>

HTML 列表

有序列表 （<ol>）

无序列表 （<ul>）

列表 - CSS 属性

列表或项目符号样式的项目标记

项目列表标记 - 图像（使用自定义项目符号图像）

要记住的要点：

列表项标记 - 位置或项目符号位置

list-style - Shorthand 属性

受控列表计数

开始

反向

价值

使用颜色设置列表样式

有序列表（<ol>）

无序列表（<ul>）