Heim > Web-Frontend > HTML-Tutorial > 向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose

向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:22:13
Original
1594 Leute haben es durchsucht

CSS HTML

<body><div class="containter"> <ul class="faceul">  <li>  <a target="_blank" href="http://www.google.com.hk"><img  src="images/google.png" / alt="向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose" ></a>  </li>  <li>  <a target="_blank" href="http://www.baidu.com"><img  src="images/baidu.png" / alt="向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose" ></a>  </li>  <li>  <a target="_blank" href="http://www.iqiyi.com"><img  src="images/iqiyi.png" / alt="向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose" ></a>  </li> </ul></div></body>
Nach dem Login kopieren


/* CSS Document */body {margin:0; padding: 2px;}.containter{  margin:0; padding:0; border:solid #3399FF 1px; height:225px; width:auto;}.faceul{border: 0;}.faceul li{ list-style-type:none; float:left;}.faceul li a{height:223px;}.faceul li a img{border:none;}.faceul li a:hover{border:dashed 1px #F00;}
Nach dem Login kopieren

以上代码会出现下面效果:

想要的效果是当鼠标移到图片上时,图片的边框显示出来为红色虚线。 为啥实际效果包不住向高手询问一个比较弱的css问题<a>为啥包不住<img>_html/css_WEB-ITnose?

回复讨论(解决方案)

.faceul li a{height:223px; display:inline-block;
}

谢谢!果然实现效果了,能解释下这句代码的意思吗

谢谢!果然实现效果了,能解释下这句代码的意思吗
http://www.w3school.com.cn/css/pr_class_display.asp

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage