如何在使用ul和li构建的菜单上包含分隔符图像？

Question

我试图在我的菜单中包含一个小图像作为分隔符,我正在享受生命中的时间(讽刺).为了创建如下所示的菜单,我使用图像下的代码.

带分隔符的菜单项示例http://r2c.images.s3.amazonaws.com/forums/menu_sample.jpg

<ul id="div-menu">
    <li class="current">
        <div class="menu-fill fill">
            <div class="menu-left left">
                <div class="menu-right right">
                    <a href="#" title="Home">Home</a>
        </div></div></div>
    </li>
    <li>
        <div class="menu-fill">
            <div class="menu-left">
                <div class="menu-right">
                    <a href="#" title="About Us">About Us</a>
        </div></div></div>  
    </li>

我的问题是我无法在li元素之间添加小分隔符图像.有任何想法吗？

Answer 1

list-style在不同的浏览器上播放.最好的方法是

ul#div-menu li { background: url(/images/seperator.gif) no repeat 0 0; }

first-child伪类不适用于所有浏览器,因此你可以将'first'类应用于第一个li并将background设置为none

ul#div-menu .first { background: none; }

注意:您需要在li上使用一些填充量来将文本推离背景图像.您可以使用最后两个参数(我已设置为0)调整背景图像的位置.第一个数字是x轴,第二个数字是y轴.所以将背景图像2px向右移动2px向上移动

ul#div-menu li { background: url(/images/seperator.gif) no repeat 2px -2px; }