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

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; 
}