涉及到块级的商品展示列表显示出现的问题
<span style="white-space:pre"> </span><pre name="code" class="css">.store_list ul
{
list-style: none;
margin: 0;
padding: 0;
}
.store_li
{
width: 22%;
height: 300px;
display: inline-block;
background-color: #fff;
list-style: none;
margin: 0;
padding: 0;
margin: 10px 0 10px 2.2%;
}
.store_li a
{
width: 100%;
height: 200px;
}
.store_img img
{
width: 100%;
height: 100%;
}
.s_title
{
width: 100%;
height: 20px;
color: #222;
}
<li class="store_li"> <a class="store_img" href=""><img src="../image/back.png"></a> <a class="s_title" href="">猪肉羊肉牛肉鸡肉火锅套餐</a></li>
显示的结果:
查了源代码之后发现,a标签并没有如设置的height:200px而显示200px的高度。
分析了一下原因:
因为a元素是内联元素,它是根据文字内容的宽高而变化的,所以宽高都是auto,为其设置宽高之类的具体属性值失效,这里的a元素内包含了一张图片img,图片设置的是宽高继承自父标签(a元素)的宽高,此时图片只能继承祖父标签的宽高咯~
解决办法:
把图片的父标签设为块级元素,也就是将a元素display:block一下。另外设置float属性也可以,因为设置了float浮动属性之后,内联元素就自动被转化成块级元素了。