菜单导航间竖杠竖线间隔符 | 效果的CSS实现

只有少数的间隔符（比如1个）

1、<a></a> <span>|<span> <a></a>

用span来创造两边的空隙而不使用空格

 

有多个重复的间隔符

1、使用<a>的border属性

再用first-child把最左边的删掉

 

缺点：如果点击效果和点击范围仅限文字，那么这样写会导致点击范围>文字区域

优点：当菜单点击效果和点击范围是矩形框时可用

 

2、用after伪元素

在每个a后插入content"|"

或者display:block定宽高或者border

可以解决方法1的点击范围问题。

 

3、定宽定长显色窄div模拟竖线

<div style="float:left;width: 1px;height: 25px; background: #000;"></div> 

简单粗暴但是可能会引起一些缩放问题的方法。