UL - LI Bullets as Image右侧是文本旁边

Question

我在设计UL导航栏方面遇到了一些问题（抱歉这个问题，但我是开发人员，而非设计师......）

问题在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

如果子弹图像是方向性的（如上例所示），rtl方法可能会产生意想不到的副作用，即在某些浏览器中镜像图像，导致箭头从右向左而不是从左向右。

背景图片在IE9中不显示此行为，并保持正确的方向。

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

Answer 2

尝试按如下方式更新multiPoint类样式：

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

这将告诉浏览器将子弹图像放在列表中而不是外部。