去除小圆点_去除li小圆点以及解决其空格问题

博客讲述了在CSS样式中遇到的一个问题,即使用`list-style:none`无法完全去除`li`元素前的小圆点且仍占用空间。作者通过检查盒模型发现`ul`有`padding`导致的占位,移除后问题得到解决。文章强调了检查CSS样式和盒模型对于解决问题的重要性,并列举了`list-style-type`的其他取值。

不管是ul还是ol中的li前面始终有个小圆点,以前没有发现问题,都是直接给ul增加list-style:none;属性,可今天屡试不爽的属性出现问题了,上图

通过两张截图可以清晰的看到虽然小圆点去掉了,但是还是占着位置。典型的占着**不**,而且还影响视图效果,怎么办?先看看样式,里面没有margin或者padding这类的东东,然后看看盒模型,果然:

从盒模型可以看到ul有个padding,外围有margin,那就把padding去掉试试。

结果显示终于正常了,也没有占位了,完美!!

总结:修改属性可能还达不到自己想要的效果,可以多查看CSS样式以及盒模型,很有用的!

--------------------------------------------------

附上其他list-style-type的取值

disc   默认值。实心圆

circle   空心圆

square   实心方块

decimal   阿拉伯数字

lower-roman   小写罗马数字

upper-roman   大写罗马数字

lower-alpha   小写英文字母

upper-alpha   大写英文字母

none   不使用项目符号

当然也可以自定义项目符号list-style-type:url();

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值