inline-block布局错位问题

Posted whellote

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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布局错位问题的主要内容，如果未能解决你的问题，请参考以下文章

设置两个DIV为display:inline-block出现上下错位问题

两个(div)元素使用了display：inline-block后出现错位问题解决

使用display: inline-block;遇到的问题及解决

两个行内元素错位不能对其的解决方法

使用自动布局的 IB_DESIGNABLE 自定义视图的错位视图警告和奇怪行为

自动布局中的错位视图警告