css關於list-style-image的表徵圖映像對齊問題的解決

首先囉嗦下，這個問題早在我剛開始學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%; }