首先啰嗦下，这个问题早在我刚开始学css是就遇到了，那是可能是大半年前的事了，后来实在没辙，就改用表格来对其小图标和文字。但今天，心血来潮，要不想用那被标准视为“邪道”当中的表格了，于是n月前的问题又重现了。
预期实现效果图：
开始定义css:
#main ul{
display:inline;
margin: 0px;
padding:0px;
list-style: url(../images/dot.gif) outside;
}
#main li {
line-height:150%;
}在ie和firefox当中的效果：
立即学习“前端免费学习笔记（深入）”；
小红三角居然红杏出墙了。瞎折腾了好一阵子，仍然是没辙。（注，小图标本来在垂直方向也和文字没对齐，后来用fireworks加高了，这点就不用说了吧。）
本想在经典论坛里发帖，但觉得太麻烦了，于是到处找相关帖子。
总算发现一个，得到启发，可以把那个小红三角作为li的背景图像啊。
于是有了下面比较巧妙而又合乎目的的定义方法：
#main ul{
display:inline;
margin: 0px;
padding:0px;
list-style-type:none;
}
#main li {
background: url(../images/dot.gif) left top no-repeat;
line-height:150%;
}效果如下：
拓展：但是如果我想实现下图所示小图标在文字的外端,该怎么办呢？
(1)开始时是想利用设置左侧补白空间（padding-left）来空出背景图像。于是重定义#main li {
padding-left:12px; background: url(../images/dot.gif) left top no-repeat; line-height:150%; }
但效果并非所想的那样，如下：
为什么“3月31日”前空出的有一个多左右呢？哦，对了，li属性自动为小图标在首行空出一个字符大小的空出来，即使你定义list-tyle-type:none。
(2)在写本示例写到上面一行时，本想把源文件改回原来的样子，在li里面删了background: url(../images/dot.gif) left top no-repeat;这一句，然后预览，惊喜地发现在ie中呈现出完美的效果出来，真是阴差阳错哦！
#main ul{
display:inline;
margin: 0px;
padding:0px;
list-style: url(../images/dot.gif) outside;
}
#main li {
padding-left:12px;
line-height:150%;
}效果图：
唯一美中不足的是在firefox里面就没这么幸运了，
padding没有作用的小图标上：
抱着死马当活马医的态度，我把padding-left:12px;改成了margin-left:12px;
预览：
ie：
firefox：
oh,这是真的吗？
除了，firefox里的小图标和文字间距要比ie中的要宽那么一点点之外，真的近乎完美了。
让我们放鞭炮庆祝下吧！
最后让我们记住最标准的list-style-type:image;的定义方法吧：
#main ul{
display:inline;
margin: 0px;
padding:0px;
list-style: url(../images/dot.gif) outside;
}
#main li {
margin-left:12px;
line-height:150%;
} 
