Html 如何在使用 ul 和 li 构建的菜单上包含分隔符图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2216197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to include a separator image on a menu built with ul and li?
提问by Geo
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.
我试图在我的菜单中包含一个小图像作为分隔符，我正在享受我的生活（讽刺）。为了创建如下所示的菜单，我使用了图像下的代码。
<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>
My problem is that I am not able to add the little separator image between the li elements. Any ideas?
我的问题是我无法在 li 元素之间添加小分隔符图像。有任何想法吗？
回答by pixeltocode
list-style plays up on different browsers. the best way to do it is
list-style 在不同的浏览器上播放。最好的方法是
ul#div-menu li { background: url(/images/seperator.gif) no repeat 0 0; }
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
第一个子伪类不适用于所有浏览器，因此您可以将“第一”类应用于第一个 li 并将背景设置为无
ul#div-menu .first { background: none; }
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
注意：您需要在 li 上使用一些填充来将文本从背景图像中推开。您可以使用最后两个参数（我已将其设置为 0）来调整背景图像的位置。第一个数字是 x 轴，第二个数字是 y 轴。所以要将背景图像向右移动 2px 并向上移动 2px
ul#div-menu li { background: url(/images/seperator.gif) no repeat 2px -2px; }
回答by Laurent le Beau-Martin
Maybe you could set the separator image as the list image:
也许您可以将分隔符图像设置为列表图像：
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;
}
