如何在用ul和li构建的菜单上包含分隔符图像？ [英] How to include a separator image on a menu built with ul and li?

问题描述

我想在我的菜单中包括一个小图像作为分隔符，我有我的生活时间（讽刺）。为了创建一个菜单，如下所示我使用的图像下的代码。

I am trying to include a small image as a separator in my menu and I am having the time of my life (sarcasm). In order to create a menu like below I am using the code under the image.

菜单项示例带有分隔符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元素之间添加小分隔符图像。任何想法？

My problem is that I am not able to add the little separator image between the li elements. Any ideas?

推荐答案

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

list-style plays up on different browsers. the best way to do it is

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

第一个子类伪类不能在所有浏览器上使用，因此您可以应用'first'class to the first li and set background to none for that

the first-child pseudo-class doesn't work on all browsers, so you can apply a 'first' class to the first li and set background to none for that

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

注意：您需要在li上使用一些填充，背景图像。您可以使用最后两个参数（我已设置为0）调整背景图像的位置。第一个数字是x轴，第二个是y轴。因此要将背景图片向右移动2px，向上移动2像素。

note: you will need to use some amount of padding on the li to push the text away from the background image. you can adjust the position of the background image using the last two parameters (which i've set to 0). the first digit is x-axis and the second one is y-axis. so to move the background image 2px to the right and 2px up

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

这篇关于如何在用ul和li构建的菜单上包含分隔符图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！