取消UL和OL符号以及padding和margin后恢复默认值的CSS

本文详细介绍了如何使用CSS恢复无序列表(UL)和有序列表(OL)的默认样式,包括列表符号和位置的设置。作者最初为了统一网页设计取消了所有UL和OL的默认样式,但在后续需求中需重新启用部分列表的默认外观。

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

原文:https://www.cnblogs.com/zhaiqianfeng/archive/2012/06/28/4616645.html

之前取消UL和OL符号以及padding和margin,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,但是后来由于某种需求在某些地方又需要恢复为默认的样式,研究了很久终于搞定:

ul{list-style-type:disc; list-style-position:inside;} 
ol{list-style-type:decimal; list-style-position:inside;}  

再解释一下:

  • list-style-type:就是控制列表符号的意思 上面的disc就是圆点 下面的decimal就是阿拉伯数字 开始以为这样就可以了,结果一浏览还是一样不会显示列表符号,最后才发现需要加上这一句
  • list-style-position:就是控制列表位置的意思 inside是列表缩进的意思 因为之前把外边距和内边距都设成0像素了 所以一定要加上这一句 才能恢复到默认

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

ul{ list-style:disc inside;}  
ol{ list-style:decimal inside;}  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值