类目之间的横竖线效果的实现

2019独角兽企业重金招聘Python工程师标准>>>

今天看了http://ued.taobao.org/blog中的一篇前端文章《段正淳的css笔记(1) 》，里面讲到了关于实现类目之间的横竖线的问题，并且引发了业界大牛的一系列争议。
对于我来说，我是本着学知识的态度去的，所以这里仅仅记录一下实现这种效果的几种方法，并且添加自己发现的另一种方法：
1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。

2、符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。

3、a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。

4：段王爷的那种思想我以代码的效果显示，因为说得有点小简单了：
html代码：
        <ul>
        <li>第一块</li>
        <li>第二块</li>
        <li>第三块</li>
        <li>第四块</li>
        <li>第五块</li>
        </ul>
    css代码：
        *{margin:0; padding:0; list-style:none;}
        ul{overflow: hidden;}
        li{width:80px;height: 40px;background-color: #e8e8e8;text-align: center;color:#fff;line-height: 40px;float: left;margin-left:-1px; display:inline; border-right: 1px solid #666666;}
但是我不知道为什么我在firebug中只有将margin-left设置为 0 的时候才有效果
5：我在天猫中看到了另外一种方法

html代码：
        <ul>
        <li>第一块</li>
        <li>第二块</li>
        <li class="border"></li>
        <li>第三块</li>
        <li>第四块</li>
        <li>第五块</li>
        </ul>
在html中加一个空的li标签显示竖线

css代码：
        *{margin:0; padding:0; list-style:none;}
        ul{overflow: hidden;}
        li{width:80px;height: 40px;background-color: #e8e8e8;text-align: center;color:#fff;line-height: 40px;float: left;}
        .border{width:0;height: 40px;display: inline-block;vertical-align: top;position: relative;font-size: 0px;border-left:1px solid #666666;}

    总结到这里的唯一感觉就是：大牛们研究的问题就是深入，一些小细节也会考虑到这么多方法，所以以后也要往细节方面考虑

转载于:https://my.oschina.net/sunshinewyf/blog/491124