php 修改css 不生效,CSS list-style 设置无效的解决办法

问题描述：

通过设置ul的list-style:square属性不生效。

*{padding: 0; margin: 0;}

ul{ list-style: none; }

ul.one{ list-style: square; }

ul.two{ list-style: circle; }

• 1
• 2
• 3

• aaaa
• bbbb
• cccc

可以看到，我们虽然设置了ul.one{ list-style: square; } ul.two{ list-style: circle; } 但是没有list-style的效果出来

出现这个问题的原因：

通常我们都会有一个css-reset初始化所有html的margin:0; padding:0;的公共样式文件。当margin:0;或者padding:0;时，如果我们没有设置list-style-position为inside的时候就会出现这种情况。

解决办法

*{padding: 0; margin: 0;}

ul{ list-style: none; }

ul.one{ list-style: square inside; }

ul.two{ list-style: circle; margin: 30px; }

• 1
• 2
• 3

• aaaa
• bbbb
• cccc

设置 list-style: square inside。或者给 ul 增加margin或者padding的left边距。