解决list-style-type属性失效

最新推荐文章于 2025-03-12 14:27:39 发布

weixin_33801856

最新推荐文章于 2025-03-12 14:27:39 发布

阅读量926

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/studyh5/p/8494518.html

本文介绍了当li标签的样式设置不生效时的两种常见原因及解决办法。一种原因是list-style-position设置为outside导致的显示遮挡，另一种原因是由于设置了float:left造成的布局异常。

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

有的时候我们在网页中对li标签设置了它的css属性，比如list-style-type:disc;然而我们的网页前端呈现结果中却看不到我们的效果，但是css又显示没错，我们该如何解决？
其实造成这种现象的原因有两种可能，一种是li属性设置了list-style-position:outside;列表符号的位置在盒模型之外，所以第二个列表项的符号被第一个列表项盖住，或者被前面的框架覆盖，所以就看不到效果，
还有一种情况就是li元素设置了float:left;属性也会造成LI元素不正常。
解决办法：
方法一：直接修改list-style-position:outside;为list-style-position:inside
方法二：在list-style-position:outside;的情况下给列表符号留个位置来显示，比如说给li加个属性margin-left：50px；第二种情况直接删掉浮动元素float即可。

转载于:https://www.cnblogs.com/studyh5/p/8494518.html