昨天晚上一直在改Blog评论框中的表情部分
原本打算用table画出来，但实际出来的效果却让我大跌眼镜：
在IE下可以显示，但在FireFox下却怎么也无法显示Table中的数据，就算是<table><tr><td>test</td></tr></table>
也无法查看到test，而在IE下却是正常的!
于是决定自己弄一下
首先想到用LI来定位，
li是一个列表，在默认情况下，是纵向显示的，如：

• 1111
• 2222
• 3333

显示表情，当然不能这样，所以要把列表从纵向显示转为横向显示，这个的实现还是问 怿飞 才知道的!-___-，只需给li定义float:left;就行了。
列表是可以实现横向显示了，但列表符号怎么办？这个我还是知道的，给li再定义一下list-style:none;就OK了。

让怿飞看了看，他说：这有语法错误啊，li是要和ul一起使用的，单独使用是错误的。
呵呵，有人在一旁指导就是不同多了，加上。
就得到下面的css
.ToolsUL{
 list-style:none;
 margin:0px;
padding: 0px;
}
.ToolsUL Li{
     float:left;
    margin:5px 1px 0 1px;
  list-style:none;
    border:1px solid #fff;
}
$ad$
这就正确了，可以实现表情图片的横向显示了，但我不知足，因为有30个表情，我想每10个表情之后就“换一行”，
也就是说，要在ul和li中实现换行的效果，直接加<br />肯定是不行的了。问了问高手，好说：
给li加一个width，然后给ul也加一个width，ul的width大概等于li的width*10，当li的总宽度达到ul的宽度时，自然就会换行了。
哈哈。
给li加上
width:50px;，因为一个表情的width属性就是50
然后给ul加上width:500px;，预览之后发现不对，应该是ul的width小了点，加到520px就行了。

再次不知足，我想当鼠标移到表情上时出现边框，
给li加一个:hover就行了，这一招是在看波西米亚的Blog时发现的，没想到css中也可以这样写，最终的css就是这样子的了
}
.ToolsUL{
 list-style:none;
 margin:0px;
 width:520px;
padding: 0px;
}
.ToolsUL Li{
 float:left;
 list-style:none;
 width:50px;
 height:50px;
 cursor:pointer;
 border:1px solid #FFF;
}
.ToolsUL Li:hover{
 border:1px solid #000;
}
评论时，点击更多表情会出现30个表情，并且每10个就换行了，达到我需要的效果了。