Home >Web Front-end >HTML Tutorial >Ask the experts about a relatively weak css problemWhy can't it be covered_html/css_WEB-ITnose
Ask the experts about a relatively weak css problemWhy can't it be covered![]()
_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:22:131597browse
CSS HTML
<body><div class="containter"> <ul class="faceul"> <li> <a target="_blank" href="http://www.google.com.hk"><img src="images/google.png" /></a> </li> <li> <a target="_blank" href="http://www.baidu.com"><img src="images/baidu.png" /></a> </li> <li> <a target="_blank" href="http://www.iqiyi.com"><img src="images/iqiyi.png" /></a> </li> </ul></div></body>
/* 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;} The above code will have the following effect:
The desired effect is when the mouse moves over the image When , the border of the picture is displayed as a red dotted line. Why can’t the actual effect3499910bf9dac5ae3c52d5ede7383485 covera1f02c36ba31691bcfe87b2722de723b?
Reply to discussion (solution)
.faceul li a{height:223px; display:inline- block;
}
Thank you! Sure enough, the effect is achieved. Can you explain the meaning of this code?
Thank you! Sure enough, the effect is achieved. Can you explain the meaning of this code?
http://www.w3school.com.cn/css/pr_class_display.asp
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：float compatible alignment_html/css_WEB-ITnoseNext article：float compatible alignment_html/css_WEB-ITnose