UL - LI项目符号作为文本右侧的图像

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

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

.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;