html的li浮动之后往下移动,关于li:hover的怎么清除浮动问题实现代码

代码如下，当鼠标移动上去时，周围显示一个方框，但是后面的会向后移动，如何才能使得当鼠标移上去时后面的

不浮动？应该如何修改代码呢？

HTML code

复制代码代码如下:

• 说明文字
• 说明文字
• 说明文字
• 说明文字

CSS代码：

CSS code

.test{position:relative;display:block;border:1px solid #DADADA;width:958px;clear:both;height:520px;overflow:auto;zoom:1;}

.test ul{list-style-type:none;width:auto;margin:0px;padding:0;clear: both;}

.test ul li{display:block;float:left;width:220px;margin:5px 8px 5px 8px;height:240px;padding:1px;}

.test ul li:hover{border:1px solid #DADADA;}

.test ul li a{width:218px;text-decoration:none;}

.test ul li a:hover{text-decoration:underline;}

重新将代码修改了下，就可以实现我所想要的效果了，如下详细的代码：

HTML code:

复制代码代码如下:

无标题文档

*{margin:0;padding:0;}

.test{position:relative;display:block;border:1px solid #DADADA;width:auto;clear:both;height:520px; margin:20px;overflow:auto;zoom:1;}

.test ul{list-style-type:none;width:auto;margin:0px;padding:0; clear:both;}

.test ul li{display:inilne-block;float:left;margin:5px 8px 5px 8px;padding:1px;}

.test ul li a{width:218px; height:218px;text-decoration:none; display:block;border:1px solid #DADADA; text-align:center;}

.test ul li a:hover{text-decoration:underline; border:1px solid red;}

.test ul li a img{border:0;}

.test ul li p{text-align:center; margin-top:8px;}

• 

  说明文字

• 

  说明文字

• 

  说明文字

• 

  说明文字