CSS 段落首行缩进后的ul ol缩进

最新推荐文章于 2022-01-07 15:21:16 发布

原创最新推荐文章于 2022-01-07 15:21:16 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML

本文介绍如何在CSS中实现段落首行缩进，并针对后续出现的无序列表（ul）和有序列表（ol）进行合理的缩进调整，确保整体排版美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 段落首行缩进后的ul ol缩进

时间:2011-04-26来源:设计与开发作者:任晴点击:272 次

摘要： CSS 段落首行缩进后的 ul ol 缩进，css 首行缩进，ul li 缩进，ol li 缩进，html 首行缩进，css li 缩进，为了网页内容中文字排版的美观，我们一般都会使用段落（如 P 标签）首行缩进的方式，如果接下来的内容中使用 ul 或 ol ，则会出现

CSS 段落首行缩进后的 ul ol 缩进，css 首行缩进，ul li 缩进，ol li 缩进，html 首行缩进，css li 缩进，为了网页内容中文字排版的美观，我们一般都会使用段落（如 P 标签）首行缩进的方式，如果接下来的内容中使用 ul 或 ol ，则会出现首行缩进文字与 ul 或 ol 前端对齐的情况，这显然不是我们想要的，本文尝试来解决这个问题。

1、首先对段落首行缩进：

以下为引用内容： 
/*** 
 * desteps.com
 * Qing  2011-04- 26
***/
.content p {
   text-indent: 2em;   /* em是相对单位，2em 即现在一个字大小的两倍 */
 }

2、接着对 ul ol 缩进：

以下为引用内容： 
/*** 
 * desteps.com
 * Qing  2011-04- 26
***/
.content ul{  
    list-style:disc inside none; 
    margin-left: 4em; 
}
.content ul ul{  
    list-style: circle inside none; 
    margin-left: 3em; 
}
.content ul ol{  
    list-style: decimal inside none; 
    margin-left: 3em; 
}
.content ol{
    list-style:demical inside none;  
    margin-left: 4em;  
}
.content ol ul{  
    list-style: circle inside none; 
    margin-left: 3em; 
}
.content ol ol{  
    list-style: decimal inside none; 
    margin-left: 3em; 
}