css 列表缩进 |js里面的css

CSS 列表缩进可以增强页面的可读性和美观性，让网页的内容更加清晰明了。下面大家来了解一下如何利用 CSS 实现列表缩进。 在 HTML 中，有两种列表：无序列表（unordered list）和有序列表（ordered list）。大家可以使用 CSS 的 text-indent 属性为这两种列表设置缩进。以下是示例代码：

ul {
list-style: none; /* 去掉列表原有的标记（默认样式）*/
text-indent: 2em; /* 缩进2个字符（1em相当于一个字母的宽度）*/
}
ol {
list-style: decimal; /* 设置有序列表的标记为阿拉伯数字 */
text-indent: 2em; /* 缩进2个字符 */
}

在上面的代码中，大家首先使用 list-style 属性将无序列表的原有标记去掉（默认情况下为实心圆点），将有序列表标记设置为阿拉伯数字。然后，大家设置了 text-indent 属性为 2em，意味着列表会被缩进 2 个字母的宽度。 此外，大家还可以使用 text-align 属性为列表标记文字设置对齐方式（默认为左对齐），例如：

ul {
list-style: none;
text-indent: 2em;
text-align: right; /* 设置列表标记文字右对齐 */
}

上面的代码将无序列表标记文字右对齐，使整个列表看起来更加整洁。 总之，CSS 列表缩进是一种简单有效的排版技巧，可以让网页内容更加清晰明了，展现出更好的用户阅读体验。