css之自定義列表符號

list-style-image圖片背景與文字對齊準則一：12px的漢字——16px的li高度——8px高度的背景圖片。

如果是14px的文字呢？則是：14px的漢字——18px的高度——10px高度的背景圖片。

<styletype="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調整到完美狀態：

<styletype="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;"><imgalign="left"> <a href="#">標題標題一標題標題一標題標題一</a></li>解釋：首先你要設置一個高度 Height =20px然後 就是行高LINE-HEIGHT=20px然後是關鍵了，因為多數人只去想如何CSS 設置，沒有去考慮屬性。 圖片增一個屬性 align 。 align="left " 或 align="absmiddle" 具體用哪個你去試試就知道了。 align 屬性是非常重要， HTML 並沒有拋棄它
推薦閱讀：