列表默认标识符，导致li前面有一段空白

今天做一个页面导航的时候，出现了因为列表默认标识符，导致li前方出现一个大约20px左右的空白区域，使用:hover时原本设置的background-color:无法生效到全部行上，如下：

虽然我知道这个这个是因为默认样式导致的，但还是习惯性的百度了一下，发现大家的内容都说的差不多，可是并没有一个很详细的解释，反正闲来无事，也就简单的做一下说明。

首先，在日常工作中，我们需要清除元素默认样式，比如像margin:0;padding:0;(元素内外边距)。

然后，这里需要用的是

/* css去掉列表标识符 */

li {

         # list-style-type:none; 这里有些人喜欢使用这个方法，在这里两个都可以使用

        list-style:none;

}

不去掉会是这么样子呢？如下：

页面中的显示为：

去掉默认标识符：

 页面显示为：

 还没完...还记得上面的margin和padding吗？对，就是这个，元素内外边距清零

 页面显示为：

 至此，解决问题，顺便说一句，一般不建议使用*{...}作为清除元素默认样式，完全是为了偷懒和截图，我也是因为好久没用忘记了，做个文章顺便提醒自己，望对大家有参考价值。