手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >关于li:hover的怎么清除浮动问题实现代码
关于li:hover的怎么清除浮动问题实现代码
摘要:代码如下,当鼠标移动上去时,周围显示一个方框,但是后面的会向后移动,如何才能使得当鼠标移上去时后面的不浮动?应该如何修改代码呢?HTMLco...

代码如下,当鼠标移动上去时,周围显示一个方框,但是后面的会向后移动,如何才能使得当鼠标移上去时后面的<li>不浮动?应该如何修改代码呢?

HTML code

<div>

<ul>

<li><a href="http://xxx.com"><img src="images/test.jpg" width="218px" height="218px"></a><br/><a href="http://xxx.com">说明文字</a></li>

<li><a href="http://xxx.com"><img src="images/test.jpg" width="218px" height="218px"></a><br/><a href="http://xxx.com">说明文字</a></li>

<li><a href="http://xxx.com"><img src="images/test.jpg" width="218px" height="218px"></a><br/><a href="http://xxx.com">说明文字</a></li>

<li><a href="http://xxx.com"><img src="images/test.jpg" width="218px" height="218px"></a><br/><a href="http://xxx.com">说明文字</a></li>

</ul>

</div>

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{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;}

</style>

</head>

<body>

<div>

<ul>

<li><a href="http://xxx.com"><img src="images/test.jpg" /></a><p href="http://xxx.com">说明文字</p></li>

<li><a href="http://xxx.com"><img src="images/test.jpg" /></a><p href="http://xxx.com">说明文字</p></li>

<li><a href="http://xxx.com"><img src="images/test.jpg" /></a><p href="http://xxx.com">说明文字</p></li>

<li><a href="http://xxx.com"><img src="images/test.jpg" /></a><p href="http://xxx.com">说明文字</p></li>

</ul>

</div>

</body>

</html>

【关于li:hover的怎么清除浮动问题实现代码】相关文章:

.clearfix:after(清除浮动)中各个属性及值详细解说

关于DIVCSS浮动float的兼容

CSS:清除浮动的最优方法

ie placeholder属性的兼容性问题解决方法

提高淘宝C店转化率的实用代码

比较全的CSS浏览器兼容问题整理总结

通过浮动+定位实现两个div在同一行

css布局中的居中问题

可视化优站边栏悬浮窗代码

input输入框中有图片怎么使用css布局实现

精品推荐
分类导航