Heim > Artikel > Web-Frontend > 关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose
关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:091461Durchsuche
我的代码如下，当鼠标移动上去时，周围显示一个方框，但是后面的会向后移动，如何才能使得当鼠标移上去时后面的
我的HTML代码：
<div class="test"><ul><li><a href="http://xxx.com"><img src="images/test.jpg" style="max-width:90%" height="218px" alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><br/><a href="http://xxx.com">说明文字</a></li><li><a href="http://xxx.com"><img src="images/test.jpg" style="max-width:90%" height="218px" alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><br/><a href="http://xxx.com">说明文字</a></li><li><a href="http://xxx.com"><img src="images/test.jpg" style="max-width:90%" height="218px" alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><br/><a href="http://xxx.com">说明文字</a></li><li><a href="http://xxx.com"><img src="images/test.jpg" style="max-width:90%" height="218px" alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><br/><a href="http://xxx.com">说明文字</a></li></ul></div>
我的CSS代码：
.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;}
回复讨论(解决方案)
<!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 class="test"><ul><li><a href="http://xxx.com"><img src="images/test.jpg" / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li><li><a href="http://xxx.com"><img src="images/test.jpg" / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li><li><a href="http://xxx.com"><img src="images/test.jpg" / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li><li><a href="http://xxx.com"><img src="images/test.jpg" / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li></ul></div> </body></html> 看一下我重新修改了，是否是你想要的效果呢？
非常感谢蓝色小燕子！
清除浮动：
clear:both;
clear:left;
clear:right;
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：竖直选项卡式面板的实现_html/css_WEB-ITnoseNächster Artikel：网页与IE8兼容视图问题_html/css_WEB-ITnose