温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

display:inline-block 无序列表布局的文字错位问题及解决方法

发布时间:2020-07-03 14:22:25 来源:网络 阅读:833 作者:qq58cf8b81c913f 栏目:web开发

<html lang="en">
<head>
<meta charset="UTF-8">
<title>MBA</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.demo{
width: 1000px;
height: auto;
background: black;
margin: 0 auto;
text-align: center;
}
.demo ul li{
display: inline-block;
}
.demo ul li h2{
width: 220px;
height: 40px;
line-height: 40px;
background: red;
text-align: center;
color: black;
}
.demo ul li p{
width: 220px;
height: 100px;
background: #eee;
color: black;
}
</style>

<div class="demo">
<ul>
<li>
<h2>好好学习 天天向上</h2>
<p>
这段文字只有一行
这段文字只有一行
</p>
</li>
<li>
<h2>好好学习 天天向上</h2>
<p>
这段文字只有两行
这段文字只有两行
</p>
</li>
<li>
<h2>好好学习 天天向上</h2>
<p>
这段文字只有两行
这段文字只有两行
这段文字只有三行
</p>
</li>
</ul>
</div>
</body>
</html>

问题:
文字都在两行内显示没有问题;

display:inline-block 无序列表布局的文字错位问题及解决方法
当调整p标签里面的元素时,出现一行显示的内容,这时布局出现错位。

display:inline-block 无序列表布局的文字错位问题及解决方法

解决办法

在 .demo ul li 添加 vertical-align: top;
vertical-align 属性设置元素的垂直对齐方式

因为vertical-align的默认值是baseline,根据调试发现,盒子和布局大小都是正确的,后调整文字内容,发现出现错位的影响因素是文字的垂直对齐的问题,于是尝试改变垂直对齐方式,最后发现给display:inline-block的元素添加 vertical-align: top;可以解决这个问题。

display:inline-block 无序列表布局的文字错位问题及解决方法

图片来源w3school。
display:inline-block 无序列表布局的文字错位问题及解决方法

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI