<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
</ul>
list-style-type:
list-style-type:none;
list-style-image:
示例:
<style type="text/css">
ul{
list-style-image:url(bullet.png);
}
</style>
![](https://pic002.cnblogs.com/images/2011/311082/2011081714450681.png)
移除list左边的间隔:
要移除list左边的间隔,只需要对ul设置padding-left:0和margin-left:0即可,对ul的设置会是的li自动继承这些样式。
<style type="text/css">
ul{
list-style-image:url(bullet.png);
padding-left:0px;
margin-left:0px;
}
</style>
(IE8) (IE6)
由此可见,在IE8下,如果把padding和margin都设置为0后,list-style-image也无法显示了。list-style-image是作为背景出现的,如果我们既要缩小左边缩进,又要显示出list-style-image,唯一的办法是将padding-left:(list-style-image的宽度)。效果如下图所示(IE8与IE6的效果还是有细微的差别)
注:margin永远都是透明的(也就是说能看到父容器的背景),而且能为负值。padding可以赋予background-color和background-image。所以为了让list-style-image显示出来,我们应该设置padding,而不是margin。
<style type="text/css">
ul{
list-style-image:url(bullet.png);
padding-left:17px;
margin-left:0px;
}
</style>
(IE8)
(IE6,虽然比没有使用padding-left的缩进更小了,但是任然有缩进且该缩进大于list-style-image的宽度)
其实CSS2.1开始,便增加了对list的marker的控制,那就是list-style-position属性。默认情况下,IE6-8都是把marker作为outside来处理的,所以上面的例子才会出marker不见了的情况,如果我们显示指定list-style-position:inline,那么上面的那种情况便不会有了。如下:
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
}
ul{
list-style-image:url(bullet.png);
list-style-position:inside;
}
</style>
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
IE8
IE6
虽然没有指定padding-left,marker照样还是显示出来了。为什么?就是因为list-style-position:inline。浏览器默认是list-style-position:outline。