如何创建一个由栏分隔的菜单,但是第一个和最后一个项目没有栏？

Question

你是如何实现这种菜单的:

关于| 隐私| 联系| 网站地图

...由垂直条分隔的菜单,但是第一个和最后一个项目的左侧和右侧没有条形(如示例所示)？

菜单项是动态生成的(在wordpress中使用),而不是手动生成.

谢谢.

Answer 1

如果您使用列表项作为导航的标记,则可以通过在分隔符上创建分隔符作为背景图像来在每个链接之间显示一条线li.

让它仅出现在列表项之间的技巧是将图像定位在左侧li,而不是第一个.此示例使用相邻的选择器:

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

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

或者,您可以将CSS content属性与before伪类一起使用,而不是使用图像.以下代码在导航链接之前添加管道(再次使用相邻选择器).

#nav li + li a:before {
    content: "|";
}

请注意IE6和IE7不支持content属性,IE6不支持相邻的选择器.

请参阅此处了解CSS内容和浏览器兼容性 - http://www.quirksmode.org/css/contents.html