如何在使用ul和li构建的菜单中添加分隔符图像？

Question

我正在尝试在我的菜单中包含一个小图片作为分隔符，但是我正度过着人生中最艰难的时刻（讽刺）。为了创建下面这样的菜单，我正在使用图片下面的代码。

<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元素之间添加小的分隔符图片。有什么想法吗？

- Geo

---

你尝试过将菜单文本设置为“-”吗？ - John Knoeller

Answer 1

列表样式在不同浏览器上的显示方式有所不同。最好的方法是：

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

第一个子元素伪类在所有浏览器上都不起作用，因此您可以将“first”类应用于第一个li，并为其设置背景为无

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

- pixeltocode

Answer 2

也许你可以将分隔符图像设置为列表图像：

ul#div-menu li
{
    list-style-image: url("/images/separator.gif");
}

ul#div-menu li:first-child /* Disable for the first li */
{
    list-style: none;
}

- Laurent