首页 > 代码库 > inline-block布局错位问题

inline-block布局错位问题

如图, 两个display为 inline-block的元素,会出现情况

技术分享

技术分享

技术分享

 

针对第三种情况:

需要添加   

vertical-align: top;

参考代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.test {
    border: 1px solid black;
    height: 50px;
    line-height: 50px;
    width: 50px;
    display: inline-block;
    /* vertical-align: top; */
}
</style>
<title></title>
</head>
<body>
<span class="test"></span>
<span class="test">123</span>


</body>
</html>

 

 

 

inline-block布局错位问题