关于li:hover的问题，怎么清除浮动？_html/css

Inhaltsverzeichnis

回复讨论(解决方案)

Heim

Web-Frontend

HTML-Tutorial

关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose

Jun 24, 2016 pm 12:14 PM

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

不浮动？我是一个新手，代码全是个人凭着个人学到的知识所写，对下面的代码有任何建议的还望各位大侠给以指正。

我的HTML代码：

<div class="test"><ul><li><a href="http://xxx.com"><img  src="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"      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="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"      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="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"      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="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"      style="max-width:90%" height="218px" alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><br/><a href="http://xxx.com">说明文字</a></li></ul></div>

Nach dem Login kopieren

我的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;}

Nach dem Login kopieren

回复讨论(解决方案)

<!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="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"    / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li><li><a href="http://xxx.com"><img  src="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"    / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li><li><a href="http://xxx.com"><img  src="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"    / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li><li><a href="http://xxx.com"><img  src="/static/imghw/default1.png"  data-src="images/test.jpg"  class="lazy"    / alt="关于li:hover的问题，怎么清除浮动？_html/css_WEB-ITnose" ></a><p href="http://xxx.com">说明文字</p></li></ul></div>  </body></html>

Nach dem Login kopieren

看一下我重新修改了，是否是你想要的效果呢？

非常感谢蓝色小燕子！

清除浮动：
clear:both;
clear:left;
clear:right;

Erklärung dieser Website

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