导航分隔符

2022-01-10 00:00:00 separator navigation css usability

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

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

我的 HTML 结构是这样的:ol >李>一个>img.

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

这里我提出了两种可能的解决方案:

Here I come to two possible solutions:

  1. 要添加更多 li 标签进行分隔(嘘！)，
  2. 在每个元素的图像中包含分隔符(这更好，但它使用户可能点击，例如，主页"，但进入服务"，因为它们是一个在另一个之后，用户可以不小心点击了属于服务"的分隔符)；
  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
}

此 CSS 将图像添加到跟在另一个列表项之后的每个列表项 - 换句话说，除了第一个之外的所有列表项.

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.

相关文章