html - 如何在使用 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 元素之间添加小分隔符图像。有什么想法吗？

Answer 1

列表样式在不同的浏览器上播放。最好的方法是

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

first-child 伪类并不适用于所有浏览器，因此您可以将“first”类应用于第一个 li 并将背景设置为 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; }