目录
问题描述
div和span元素使用display: inline-block出现错位
代码如下：
<style>
div {
width: 100px;
height: 100px;
border: 1px solid blue;
display: inline-block;
}
span {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
</style>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>原因分析
inline-block元素既具有行内元素的特性又具有块级元素的特性，它可以使div和span的内容作为块元素呈现，而同一行内元素对齐方式默认是底部对齐，即vertical-align：baseline。
解决方案
1、用float，这是备选方案，因为脱离文档流后页面元素会不好控制；
2、简单粗暴地给所有元素都加上长度相同的内容；
3、设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置。
<body>
<div>div块级元素 </div>
<span>span行内元素</span>
</body>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid blue;
display: inline-block;
vertical-align: top;
}
span {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
</style>
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
