导航分隔符

Question

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

我的HTML结构如下:ol> li> a> img.

在这里,我得出两个可能的解决方案

1. 要添加更多li标签进行分离(嘘!),
2. 在每个元素的图像中包含分隔符(这是更好的,但它使用户可以点击,例如,"主页",但是到"服务",因为它们是一个接一个,用户可能不小心点击分隔符属于"服务");

该怎么办？

Answer 1

如果没有迫切需要将图像用于分隔符,则可以使用纯CSS执行此操作.

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

这会在每个列表项之间添加一个条,就像所描述的原始问题中的图像一样.但由于我们使用的是相邻的选择器,因此它不会将条形放在第一个元素之前.因为我们正在使用:before伪选择器,所以它不会放在最后.

Answer 2

只需使用分隔符图像作为背景图像li.

要使其仅显示在列表项之间,请将图像li放在第一个图像的左侧,而不是第一个图像的左侧.

例如:

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

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

NB.请注意,相邻的选择器(li + li)在IE6中不起作用,因此您只需将背景图像添加到常规li(使用条件样式表),并可能对其中一个边应用负边距.

Answer 3

其他解决方案都可以，但是如果使用:after则不需要在最后添加分隔符，如果使用:before则不需要在最开始添加分隔符。

所以：

案例：之后

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

案例：之前

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Answer 4

要使分隔符相对于菜单文本垂直居中，

.menustyle li + li:before {
  content: ' | ';
  padding: 0;
  position: relative;
  top: -2px;
}