freeCodeCamp/guide/chinese/css/styling-lists/index.md

title	localeTitle
Styling Lists	样式列表

样式列表

HTML列表回顾

HTML中有两种主要类型的列表 - 有序和无序 。

在有序列表（ <ol></ol> ）中，列表项的顺序很重要。这些项目可以按数字，罗马数字，字母数字或其他类型的标记顺序出现。有序列表的默认标记是数字（或decimal ）：

在无序列表（ <ul></ul> ）中，列表项的顺序无关紧要。项目以项目符号格式显示。无序列表的默认标记是圆形项目符号或disc 。

使用<li></li>标记创建有序或无序列表中的每个列表项。

列表特定样式

特定于样式列表的常用属性有三种： list-style-type ， list-style-position和list-style-image 。还有一个速记属性，包括所有三个。

list-style-type

出现在有序和无序列表中的标记（或项目符号点）可以通过多种方式设置样式。用于样式化标记类型的CSS属性是list-style-type 。有序列表的默认list-style-type值是decimal ，而无序列表的默认值是disc 。

有序列表示例：

/* css */ 
 ol { 
  list-style-type: upper-roman; 
 } 

无序列表示例：

/* css */ 
 ul { 
  list-style-type: square; 
 } 

没有标记示例：

/* css */ 
 ul { 
  list-style-type: none; 
 } 

list-style-type属性的可接受值包括：

无序：

• 光盘（ 默认 ）
• 圈
• 广场

排序：

• 十进制（ 默认 ）
• 小数领先的零
• 低罗马
• 上罗马
• 降低希腊
• 较低的拉丁
• 上拉丁
• 亚美尼亚
• 格鲁吉亚
• 下-α
• 上-α

其他：

• 没有

注意：上面列出的所有属性值都可用于为有序列表和无序列表设置样式（例如：带有square列表标记的有序列表）。

list-style-position

list-style-position控制列表标记是出现在每个列表项元素的内部还是外部（ <li></li> ）。该属性接受两个值， outside （默认）或inside 。

将标记outside列表项元素outside ，每个列表项的所有文本行和子行将垂直对齐：

/* css */ 
 ul { 
  list-style-position: outside; /* default */ 
 } 

将标记inside ，每个列表项的第一个文本行将缩进，以便为标记腾出空间。相同列表项的任何子行都将与标记对齐，而不是与第一个文本行对齐：

/* css */ 
 ul { 
  list-style-position: inside; 
 } 

list-style-image

list-style-image属性接受图像URL代替列表标记。此属性的默认值为none 。

/* css */ 
 ul { 
  list-style-image: url(https://url-to-image); 
 } 

list-style速记

list-style是上面列出的三个样式属性的简写属性。 list-style接受的值的顺序是list-style-type ， list-style-position和list-style-image 。如果省略任何值，将使用该属性的默认值。

例：

/* css */ 
 ul { 
  list-style: circle inside none; 
 } 

更多列表特定的样式

有序列表标签还接受控制其列表项的流量，计数或特定标记值的属性。这些包括start ， reversed和value属性。有关更多详细信息，请参阅下面列出的MDN资源。

一般造型

列表内容可以像其他p或div元素一样进行样式设置。 color ， font-family ， margin ， padding或border只是可以添加到ul ， ol或li元素的属性的几个示例。

请注意，添加到ul或ol元素的任何样式都将影响整个列表。直接添加到li元素的样式将影响单个列表项。在下面的示例中，border和background-color属性在list和list item元素之间的样式不同：

/* css */ 
 ul { 
  list-style-type: circle; 
  border: 2px solid blue; 
  background-color: lightblue; 
 } 
 li { 
  margin: 5px; 
  background-color: lightyellow; 
 } 

列表间距

当list-style-type设置为none时，您可能会注意到列表项前面有额外的间距。在list元素上将padding设置为0 （或者首选任何间距）将覆盖此默认填充。

/* css */ 
 ul { 
  list-style: none; 
  padding: 0; 
 } 
 li { 
  padding: 5px 10px; 
  background-color: #EEEEEE; 
  border: 1px solid #DDDDDD; 
 } 

---

资料来源：

下面的链接在本文中的编译信息中引用。有关此主题的更多详细信息，请访问它们。

更多信息：

MDN - 样式列表

W3Schools - CSS列表

CSS技巧 - 列表样式