导航的分隔符 [英] Separators For Navigation

问题描述

我需要在导航元素之间添加分隔符。分隔符是图片。

I need to add separators between elements of navigation. Separators are images.

我的HTML结构如下： ol> li> a> img 。

My HTML structure is like: ol>li>a>img.

这里我来两个可能的解决方案：

Here I come to two possible solutions:

1. 添加更多 li 标签用于分隔/ li>
   
2. 在每个元素的图像中包含分隔符（这是更好的，但它使用户可能点击，例如Home，但得到服务，因为他们是一个后其他人和用户可能会意外点击属于服务的分隔符）;

1. To add more li tags for separation (boo!),
2. Include separator in image of each element (this is better, but it makes possibility that user may click on, example, "Home", but get to "Services", because they are one behind the other and user may accidentally click on separator that belongs to "Services");

该怎么办？

推荐答案

只需在 li 上使用分隔符图片作为背景图片。

Simply use the separator image as a background image on the li.

要使它只出现在列表项之间，请将图像放在 li 的左边，但不要放在第一个。

To get it to only appear in between list items, position the image to the left of the li, but not on the first one.

例如：

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

列表项，紧跟在另一个列表项之后 - 换句话说，所有列表项都是第一个。

This CSS adds the image to every list item that follows another list item - in other words all of them but the first.

注意。请注意邻近选择器（li + li）在IE6中不起作用，因此您只需将背景图片添加到常规li（使用条件样式表），并应用负边距到一个边缘。

NB. Be aware the adjacent selector (li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.

这篇关于导航的分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！