可以使用 CSS 控制列表的样式、空间和序数字,具体方法如下:
使用list-style-type属性来控制列表项的标志样式,常用的属性值有:
ul { list-style-type: disc; /* 实心圆点 */ list-style-type: circle; /* 空心圆点 */ list-style-type: square; /* 实心方块 */ list-style-type: decimal; /* 阿拉伯数字 */ list-style-type: lower-roman; /* 小写罗马数字 */ list-style-type: upper-roman; /* 大写罗马数字 */ list-style-type: lower-alpha; /* 小写字母 */ list-style-type: upper-alpha; /* 大写字母 */ }
也可以使用list-style-image属性来设置自定义标志图像:
ul { list-style-image: url('image.png'); }
使用margin和padding属性来控制列表项之间和列表项与边框之间的空间:
ul { margin: 0; padding: 0; list-style-type: none; /* 去掉标志 */ }li { margin: 10px 0; padding: 0 0 0 20px; }
上面的代码将列表项之间的垂直间距设置为10px,水平间距为20px,列表项的左侧空出20px的空间。
使用counter-reset和counter-increment属性来控制序数字的起点和步长,结合:before伪元素来显示序数字:
ol { counter-reset: section; /* 将序数字起点设置为1 */ }li:before { counter-increment: section; / 每个列表项序数字加1 / content: counter(section) ". "; / 显示序数字和一个点 / }
上面的代码将ol列表的序数字起点设置为1,每个li列表项的序数字加1,并在每个li:before伪元素中显示序数字。