用display: inline-block;让div居于一行，div内填充元素后错位问题

最新推荐文章于 2022-07-18 14:45:09 发布

Skye Lin

最新推荐文章于 2022-07-18 14:45:09 发布

阅读量4.2k

点赞数 1

分类专栏： Java Web html 文章标签： div

本文链接：https://blog.csdn.net/skye_95/article/details/82722861

版权

html 同时被 2 个专栏收录

35 篇文章 3 订阅

订阅专栏

Java Web

27 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.test{
				width: 200px;
				height: 200px;
				margin: 20px;
				border: 1px solid black;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="test">湖北省</div>
		<div class="test"></div>
		<div class="test"></div>
		<div class="test"></div>
	</body>
</html>

结果图：

解决办法：在div的样式中加上vertical-align: top;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.test{
				width: 200px;
				height: 200px;
				margin: 20px;
				border: 1px solid black;
				vertical-align: top;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="test">湖北省</div>
		<div class="test">武汉市</div>
		<div class="test"></div>
		<div class="test"></div>
	</body>
</html>

结果图：

优惠劵

Skye Lin

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
用display: inline-block;让div居于一行，div内填充元素后错位问题

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .test{ width: 200px; height: 200px; margin: 20px
复制链接

扫一扫