关于的display:inline-block之后同一行的元素错位问题

最新推荐文章于 2023-04-22 01:57:36 发布

柳柳柳柳柳

最新推荐文章于 2023-04-22 01:57:36 发布

阅读量2.1k

点赞数 1

分类专栏：自己遇到的问题文章标签： css初学者

本文链接：https://blog.csdn.net/l362929113/article/details/82430802

版权

自己遇到的问题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

图片与文字错位

<ul>
	<li v-for="item in li">
		<img src="http://img1.qunarzz.com/sight/p0/1806/97/97f0cf5b6a44557ca3.water.jpg_200x200_003494e1.jpg" />
		<div class="lcontent">
			<div class="ltitle">天津海昌极地海洋公园</div>
		</div>
	</li>
</ul>

如上所示，容器默认overflow：hidden属性，当两个元素均设置为display:inline-block后，改变了两个元素的基线位置，会导致错位现象。。
解决方法：
①将两个元素的vertical-align属性设置为baseline之外的其他值（如top,midddle等）；
②不用display:inline-block方法，改用float将两个元素实现居于一行显示。