css的所有列表 |行距css

/* UL列表 */
ul {
list-style-type: none; /* 去掉原有的基础样式 */
padding: 0;
margin: 0;
}
/* UL列表中的li标签 */
li {
display: block;
padding: 10px;
}
/* OL列表 */
ol {
list-style-type: decimal; /* 设置序号样式 */
padding: 0;
margin: 0;
}
/* OL列表中的li标签 */
li {
display: block;
padding: 10px;
}
/* 自定义列表 */
dl {
padding: 0;
margin: 0;
}
/* 定义自定义列表中的term样式 */
dt {
font-weight: bold;
}
/* 定义自定义列表中的description样式 */
dd {
margin-left: 20px;
}
/* 设置垂直列表样式 */
ul {
list-style-type: none; /* 去掉原有的基础样式 */
display: inline-block; /* 设置成行内元素 */
}
/* 垂直列表中的li标签 */
li {
display: block;
}
/* 设置水平列表样式 */
ul {
list-style-type: none; /* 去掉原有的基础样式 */
display: inline-block;
white-space: nowrap; /* 避免文本换行 */
}
/* 水平列表中的li标签 */
li {
display: inline-block;
margin-right: 20px;
}

以上就是CSS中所有列表的相关代码和样式，掌握好这些列表的相关样式和用法，可以使得大家的网页设计更加的专业、美观、实用。