文字列表间隔线写法（隐藏最后一个列表项的边框或间隔线）

Question

转：李惟

文字列表间隔线写法（隐藏最后一个列表项的边框或间隔线）

在写 li / span / a 列表的时候，间隔线总会有的。假如我们用 li 的 border 模拟间隔线。
<style type="text/css" title="">
li{border-right:1px solid #000;padding:0 8px;}
</style>

<ul>
<li>first</li>
<li>second</li>
<li>etc...</li>
<li>last</li>
</ul>

这样会发现最后一个 li 也有了间隔线，这是我们不需要的。一般会在最后一个 li 的地方加个 class="last" 然后在 css 里定义:

li.last{border-right:none;}

这的确可以解决问题，有时候我们需要对 li 做个当前的样式，比如 class=“current” ，理所当然，在我们的 css 里又会定义：

li.current{background:#ccc;}

这时候 li 项目列表标签里可能会有这样的情况：

1. <li class="current">current item</li>
2. <li class=“current last">last current item</li>
4. 单纯的写样式来说，不会有太多问题，多加了个 class 问题。可是对于程序员来说就是一个挑战，写 tab 时候用脚本实现一下就知道了。
6. 有这样一种写法，加以研究 share 一下：
8. <style type="text/css" title="">
9. ul{display:inline-block;white-space:nowrap;*display:inline;*zoom:1;overflow:hidden;}
10. li{display:inline;margin-right:-1px;border-right:1px solid #000;padding:0 8px;}
11. </style>
13. <ul>
14. <li>first</li>
15. <li>second</li>
16. <li>etc...</li>
17. <li>last</li>
18. </ul>

复制代码这个是居中的写法是比较麻烦的一种，li居中显示，ul自适应宽度。做导航时候经常用的一种样式。
原理是利用 margin 设定负值（ margin-right:-1px;）产生溢出，然后  overflow:hidden; 设定溢出隐藏。当ul或者其他的容器元素宽度一定的时候，自然不用多说，但是当宽不定的时候，就要花点功夫了。
首先 IE 里要激发一个 layout ，所以用了{*display:inline;*zoom:1;}
FF及其它里 要 {display:inline-block;}竟然折行，未知原因，所以{display:inline-block;white-space:nowrap;}
ok!至此一个横向居中，自适应宽度的有间隔列表项就搞定了。
接下来写 tab 就只要考虑一个 class="current" 就可以了，大家皆大欢喜！
ps：