加入一个li元素包裹了图片,则li元素的宽度应该和图片的宽度一致吗
具体数值应该根据什么评判
假如有以下代码
<li>
<a href="flower_details.php?flowerId=9010066" target="_self">
<span class="img-box">
<img src="Images/flower_products/9010736.jpg_220x240.jpg" height="240" width="220">
</span>
<span class="product-title">
爱无止境--66枝紫玫瑰、小熊一只 </span>
<p class="price">
<span class="price-sign">¥</span>
<span class="price-num">558</span>
</p>
</a>
</li>
假如li元素也设宽度为220,并有如下css样式
.floor-products>li {
float: left;
border: 1px solid #999;
list-style-type: none;
padding: 1px;
margin-right: 1px;
margin-left: 1px;
width: 220px;
height: 320px;
}
ps:设置padding主要是为了hover边框加粗元素不抖动,原理看我的博客:http://blog.csdn.net/qq_26222859/article/details/51232697
.floor-products>li:hover{
border: 2px solid #F63;
padding: 0px;
}
好的,我们继续,在li元素这样设置css样式后,我们看浏览器审查元素后li元素的框架图
由图可以看出,li元素内给图片留下的宽度只剩下216px
而图片宽度为220px,这样会造成的后果是什么呢,我们看下图
图片向右盖住了li元素的边框。
那么该怎么合理的设置li元素的宽度呢?
图片的宽度+border宽度*2+paading宽度*2=li元素宽度即可
还有一种很好的预防方法就是设置overflow:hidden
.floor-products>li {
float: left;
border: 1px solid #999;
list-style-type: none;
padding: 1px;
margin-right: 1px;
margin-left: 1px;
width: 220px;
height: 320px;
overflow:hidden;
}
这样也不会出现溢出的问题。