如何创建一个由栏分隔的菜单，但第一个和最后一个项目没有栏？
如何实现这种菜单：
关于|隐私 |联系我们 |站点地图
...由竖线分隔的菜单，但第一个和最后一个项目的左右两侧没有竖线（如示例所示）？
菜单项是动态生成的（在 WordPress 中使用），而不是手动生成。
谢谢。
How do you achieve this kind of menu:
About | Privacy | Contact | Site Map
... a menu separated by a vertical bar, but the first and last item doesn't have a bar on the left and right sides (as shown in the example)?
The menu items are generated dynamically (used in wordpress), not manually.
thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果您使用列表项作为导航标记，则可以通过在
li上创建分隔符作为背景图像，在每个链接之间显示一条线。让它只出现在列表项之间的技巧是将图像放置在
li的左侧，但不要放在第一个上。此示例使用相邻选择器：此 CSS 将图像添加到另一个列表项后面的每个列表项 - 换句话说，除了第一个之外的所有列表项。
或者您可以将 CSS
content属性与before伪类一起使用，而不是使用图像。以下代码在导航链接之前添加一个管道（再次使用相邻的选择器）。请注意，IE6 和 IE7 不支持 content 属性，并且 IE6 不支持相邻选择器。
请参阅此处了解 CSS 内容和浏览器兼容性 - http://www.quirksmode.org/css/contents。 html
If you are using list items as the mark-up for your navigation you can display a line between each link by creating the separator as a background image on the
li.The trick to get it to only appear in between list items is to position the image to the left of the
li, but not on the first one. This example uses the adjacent selector:This CSS adds the image to every list item that follows another list item - in other words all of them but the first.
Alternatively you can use the CSS
contentproperty with thebeforepseudo class, instead of an image. The following code adds a pipe before your navigation links (again using the adjacent selector).Be aware the content property is not supported in IE6 and IE7, and the adjacent selector is not supported in IE6.
See here for CSS contents and browser compatibility - http://www.quirksmode.org/css/contents.html
竖线只是键盘上的一个字符，因此您可以在单词之间键入它。
The vertical bar is just a character on the keyboard, so you can type it in between the words.
找到了一个更简单的 WordPress 解决方案！
只需转到“外观”>“菜单”并添加“|”在菜单每个标题的导航标签的末尾！
Found an easier solution for wordpress!
Just go to Appearance>Menus and add "
|" in the end of the Navigation Label for each title of the menu!!
我认为最好的方法是使用 CSS 类。
在外观→菜单中：
http://d.pr/i/I9ko+
添加类“最后”到最后一个菜单项
然后在 style.css 中添加：
#nav li.last span {显示：无；
}
I think the best way to do this is with a CSS class.
In Appearance → Menus:
http://d.pr/i/I9ko+
Add a class of “last” to your last menu item
Then in your style.css, add:
#nav li.last span {display: none;
}