合理设置包裹图片的标签的宽度与overflow:hidden

最新推荐文章于 2021-06-03 13:03:51 发布

zhifeng687

最新推荐文章于 2021-06-03 13:03:51 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_26222859/article/details/51412779

前端专栏收录该内容

82 篇文章

订阅专栏

本文探讨了在HTML中LI元素包裹图片时，如何合理地设置LI元素的宽度以避免内容溢出的问题。通过调整LI元素的宽度、边框及填充属性，并使用overflow:hidden样式，可以有效防止内容溢出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加入一个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.youkuaiyun.com/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;
}

这样也不会出现溢出的问题。