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%;
 }

以上是css關於list-style-image的圖示影像對齊問題的解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！