6.0 KiB
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; }
资料来源:
下面的链接在本文中的编译信息中引用。有关此主题的更多详细信息,请访问它们。