电脑教程学习网

如果直接在网页用 ul li 标签，默认情况下有一个小黑点，并且每个li前面还有一段空白，尤其是li中包括图片的情况。为什么会出现这种情况？ul li 是 html 中的列表标签，所以默认每个li前面都有一个小黑点。而每个li前面空白与 padding 和 margin 有关，padding 是内间距，margin 外边距。

　　仅用文字说明不太形象，下面将分别举例说明去掉 ul li前面的点的方法和列举li前面空白的示例以及去掉空白的方法。

　　一、去掉ul li 前面的点

　　只需在 css 文件或 html 的 style 标签中添加去掉ul li 前面的点 css 属性即可，具体如下：

　　去掉 li 前面的点 css样式：

　　ul,li{list-style:none;}

　　如果直接写在网页文件中，需要放在 style 标签中，具体样式如下：

　　<style type="text/css">
　　　　ul,li{list-style:none;}
　　</style>

　　一般来说，很多 html 标签都需要去掉小黑点，所以把 list-style:none 写到一个公共 css 文件，所有网页引用这个文件，就不用每个网页都写了。

　　二、去掉li前面空白

　　1、li前面有空白的示例

　　如果直接在网页中用 ul li，每个 li 前面都有空白，如图1所示：

图1

　　图1代码：

　　<style type="text/css">

　　　.test{overflow:hidden; width:410; height:200px;border:#c9d9e3 1px solid;}

　　</style>

　　<ul class="test"><li><img src="images/ads1.jpg" alt="去掉li前面空白" /></li></ul>

　　2、去掉li前面空白

　　只需在 css 中加 ul,li{padding:0; margin:0;}，li前面的空白就会去掉，即：

　　<style type="text/css">
　　　ul,li{padding:0; margin:0;}
　　　.test{overflow:hidden; width:410; height:200px;border:#c9d9e3 1px solid;}

　　</style>

　　去掉li前面的空白后的效果如图2所示：

图2