div+css这样的导航栏的分隔符怎么弄出来

Question

如图所示，每个栏目中间都有一条竖线，css应该怎么写出来？

Answer 1

3种方法：

就是文字竖线 "  |  "   这个， 更改size和line-height就行了

普通图片li排列  写在DIV里

普通图片 位置截取    也是写在div里的

Answer 2

这些竖线都是图片，就像下面这个图片一样。

追问

我知道是图片，但是这个如果放在li里的话，太占位置了，所以应该是写在css里的吧，但是css的话，每个栏目会对应一条竖线吧。
图中8个栏目，但是只有7条竖线。那么这些竖线究竟是写在css里还是div里

追答

这种效果一般都是如下方法实现的：

<li><a href="javascript:void(0);">首页</a></li>
    <li class="menu_line"></li>
<li><a href="javascript:void(0);">子页1</a></li>
    <li class="menu_line"></li>
<li><a href="javascript:void(0);">子页2</a></li>

中间的<li class="menu_line"></li>就是竖线，然后对应css里添加这样的样式：

.menu_line{ width:2px; background-image: url("../img/line.gif"); }

把图片对应上就可以了

本回答被提问者采纳

Answer 3

这是一个大的背景图片，直接放在ul里面。然后li设置好宽度就可以了。