CSS list-style 设置无效的解决办法

问题描述：

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

<style type="text/css">
 *{padding: 0; margin: 0;}
 ul{ list-style: none;  }
 ul.one{ list-style: square; }
 ul.two{ list-style: circle; }
</style>
<ul class="one">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

<ul class="two">
 <li>aaaa</li>
 <li>bbbb</li>
 <li>cccc</li>
</ul>

可以看到，我们虽然设置了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的时候就会出现这种情况。

解决办法

<style type="text/css">
 *{padding: 0; margin: 0;}
 ul{ list-style: none;  }
 ul.one{ list-style: square inside; }
 ul.two{ list-style: circle; margin: 30px; }
</style>
<ul class="one">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

<ul class="two">
 <li>aaaa</li>
 <li>bbbb</li>
 <li>cccc</li>
</ul>

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