html中取消ol的123,CSS取消UL和OL符号之后怎样再单独恢复默认

由于在设计初期没有考虑周全,我在CSS里面一开始就把UL和OL列表项目符号取消了,并且把外边距和内边距都设成了0px,但是我今天写文章的时候使用OL列表,生成文章才发现没有符号，告诉你我怎么解决的。

CSS代码如下：

ul,ol{list-style:none; margin:0px; padding:0px;}

先解释一下为什么我要这么写：

ul,ol开头这样写就是控制所有的ul和ol

list-style:none;

就是把列表的项目符号取消，不显示符号，因为在写导航的时候不用单独来取消，并且在输入文章列表的时候我也不想用默认的一个圆点。

margin:0px; 在IE里面列表默认有外边距，所以设置成0像素，方便控制。

padding:0px;在火狐里面列表默认有内边距，所以设置成0像素，也是未来方便控制。

因为我一开始就控制了所有的UL和OL，但是我发布文章的时候需要用有项目符号的列表才直观，研究了很久终于搞定，现在说一下：

我的文章内容是放在

id="content">这里的

，那么就在CSS里面加上

#content ul{list-style-type:disc;

list-style-position:inside;}

#content ol{list-style-type:decimal;

list-style-position:inside;}

再解释一下这两句

list-style-type:就是控制列表符号的意思 上面的disc就是圆点

下面的decimal就是阿拉伯数字开始以为这样就可以了，结果一浏览还是一样不会显示列表符号，最后才发现需要加上这一句

list-style-position:就是控制列表位置的意思 inside是列表缩进的意思

因为之前把外边距和内边距都设成0像素了所以一定要加上这一句 才能恢复到默认

这两句代码还可以简写，如下：

#content ul{ list-style:disc inside;}

#content ol{ list-style:decimal inside;}

简写就不用我多说了，懂点CSS的都知道，很多属性都可以写成一句，养成这种习惯可以减少代码，提高效率和浏览速度。

现在这篇文章就是恢复了默认列表符号的，测试给大家看一下，如果转载请确认自己的内容所在层不是取消了符号的层。

本文地址：http://www.liyongquan.com/html/css/11.html

转载请注明出处：李涌泉博客

liyongquan.com 网页设计爱好者，游戏软件发烧友！