css之自定义列表符号

list-style-image图片背景与文字对齐准则一：12px的汉字——16px的li高度——8px高度的背景图片。

如果是14px的文字呢？则是：14px的汉字——18px的高度——10px高度的背景图片。

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{background:url(../image/li_point.gif) no-repeat left center; font-size:12px; height:18px; text-indent:16px;line-height:18px; }
</style>

通过背景定位与text-indent首行文字缩进控制控制文字起始位置实现，

可以利用css hack调整到完美状态：

<style type="text/css">
ul{list-style:none; padding:0; margin:0; margin-left:50px;}
ul li{background:url(../image/li_point.gif) no-repeat left center; font-size:12px; height:18px; *height:16px; text-indent:16px; line-height:18px; *padding-top:2px;}
</style>

红色标示使IE下文字下沉2px从而与前面的黑色点点完美对齐。

list-style-image  这个可以用position 来设置图片位置 ： list-style-position: 5px 5px;
 
但是 list-style-image  各种属性在各种浏览器效果不一，
所以我们抛弃list-style-image ，而改用插入一个小图片。
例如：<li style="height:20px; line-height:20px;"><img align="left"> <a href="#">标题标题一标题标题一标题标题一</a></li>
 
解释：
首先你要设置一个高度 Height =20px
然后 就是行高LINE-HEIGHT  =20px
 
然后是关键了，因为多数人只去想如何CSS 设置，没有去考虑属性。
图片增一个属性  align 。
align="left "    或 align="absmiddle"  具体用哪个你去试试就知道了。 
align  属性是非常重要， HTML 并没有抛弃它