先看下我们最终要完成的效果：
首页是公共的定义：
ul{
display:block;
clear:both;
list-style:none;
width:210px;/*蓝色背景正常宽度*/
overflow:hidden;/*hack具体看[原]清除浮动最简单的方法*/
padding:4px 0;
background-color:#3366CC;
}
先把基本的表现做出来：
li{
width:97px;
background-color:#FFFF00;
line-height:23px;
}
为了让li并排，为它加上float、加上间隔。注意，此时IE6下会出现“双倍间隔的bug”
li{
float:left;
width:82px;
margin:0 0 4px 5px;
background-color:#FFFF00;
line-height:23px;
}
OK，兵来将挡，用display:inline对付bug。
li{
display:inline;
float:left;
width:97px;
margin:0 0 4px 5px;
background-color:#FFFF00;
line-height:23px;
}
如何给li中的文字跟边缘加间隔呢？有两个方案：
大家都知道padding会影响到盒模型，而传说中text-indent是不会影响到盒模型的。 OK，让我们试试text-indent。
li{
display:inline;
float:left;
width:97px;
margin:0 0 4px 5px;
background-color:#FFFF00;
text-indent:20px;
line-height:23px;
}
看上去表现不错，不过再看看IE6……出现那奇怪的现象了，在偶数的列表中，蓝色背景右边和下面都多出了一块。
很明显跟text-indent是有关！嘿～嘿～，为什么会这样呢？目前原因不明，不过个人觉得跟“IE是猪”那个bug可能同出一辙。
觉得是不是因为列表的关系，一开始我也怀疑，因为li的属性比较特别，为此，我们再写一个不用li的：
很不幸，结果是一样的。
