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

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

Answer 2

竖条只是键盘上的一个字符，因此您可以在单词之间输入。

Answer 3

为wordpress找到了一个更简单的解决方案！

只需转到外观＆gt;菜单并添加“|”在菜单的每个标题的导航标签的末尾!!

Answer 4

我认为最好的方法是使用CSS类。

在外观→菜单： http://d.pr/i/I9ko+

1. 点击屏幕选项
2. 检查CSS类

3. 在上一个菜单项中添加一个“last”类 然后在你的style.css中添加：

   #nav li.last span { display: none; }