可以使用 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伪元素中显示序数字。