UL - 李子彈圖像的右側旁邊的文本

Question

我有一些問題的造型作爲UL導航欄（對不起，這個問題，但IAM開發商，設計師不..）

的問題occours在Mac上的Safari（FF工作正常）請參閱第一張圖片（FF）

的CSS：

.multiPoint { 
    list-style-image:url(../images/punkte.jpg); } 

.directionRight{ 
    direction:rtl; 
    padding-right:3em; 
    margin-right:0.5em; 
} 

#navigation { 
    text-align: left; 
} 

HTML：

<div id="navigation" class="span-6 directionRight"> 
    <ul> 
    <li class="multiPoint">Sie</li> 
    </ul> 
</div> 

Answer 1

嘗試更新多類樣式如下：

.multiPoint { 
    list-style-image:url(../images/punkte.jpg); 
    list-style-position: inside; 
} 

這將告訴瀏覽器你的子彈的圖像定位列表，而不是外部的內部。

Answer 2

如果子彈圖像是方向性的（如上例），rtl方法可能會產生意想不到的副作用，即圖像在某些瀏覽器中被鏡像，導致箭頭從右向左指向而不是從左到右對。

背景圖像在IE9中不顯示此行爲，並且它保持正確的方向。

list-style: none; 
background: url(images/bullet.gif) no-repeat center right; 
padding-right: 10px;