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

时间：2011-04-15 来源：李惟

在写 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 项目列表标签里可能会有这样的情况：

<li class="current">current item</li>
<li class=“current last">last current item</li>

单纯的写样式来说，不会有太多问题，多加了个 class 问题。可是对于程序员来说就是一个挑战，写 tab 时候用脚本实现一下就知道了。

有这样一种写法，加以研究 share 一下：

<style type="text/css" title="">
ul{display:inline-block;white-space:nowrap;*display:inline;*zoom:1;overflow:hidden;}
li{display:inline;margin-right:-1px;border-right:1px solid #000;padding:0 8px;}
</style>

<ul>
<li>first</li>
<li>second</li>
<li>etc...</li>
<li>last</li>
</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：
竖向的也一样，有兴趣的可以试试！