HTML列表(ul/ol)中 li 标签被内容撑开后盒子居然比内容大

最新推荐文章于 2023-04-10 17:25:53 发布

zmf19901117

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习中的小问题

本文链接：https://blog.youkuaiyun.com/zmf19901117/article/details/97104776

学习中的小问题专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在CSS布局中，当一个li标签内的a标签设置为inline-block并给予固定尺寸时，出现的高度溢出现象。通过调整样式属性如line-height和font-size，最终解决了这个问题。

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

看看下面这段代码，已经提前将整个面的内外边距（margin0,padding0）设为0。没有给<li>宽高,把li 里面的a标签转化为inline-block行内块元素，给宽高分别为200px，我们推测 li 标签应该被a标签的宽高撑开，宽高也应变为200px，但是显示出来 li 的高大于200px。

代码：

<head>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
		background-color: pink;
		float: left;
		margin: 100px;
	}
	a {
		width: 200px;
		height: 200px;
		display: inline-block;
		background-color: skyblue;
		border-radius: 50%;
	}
	</style>
</head>
<body>
	<ul>
		<li><a href="#"></a></li>
	</ul>
</body>

运行结果：