如图:想要让黄、红两个盒子水平排列,方法有很多,有position定位,float浮动,实在不行还有弹性盒display:flex;还有一种方法就是display:inline-block;将其变成行内块元素,便可以水平排列,但是问题就出现在了这里,当我们设置display:inline-block;后会出现第二幅图的情况
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/1/16c4d3d45b61c2f5~tplv-t2oaga2asx-jj-mark:3024:0:0:0:q75.png)
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/1/16c4d4231060abac~tplv-t2oaga2asx-jj-mark:3024:0:0:0:q75.png)
要解决这个问题其实也很简单,只需要将vertical-align的值改为top、middle等其他的值就可以了。
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/1/16c4d4dd9ffb0236~tplv-t2oaga2asx-jj-mark:3024:0:0:0:q75.png)
inline-block导致的错位问题详解
如图:想要让黄、红两个盒子水平排列,方法有很多,有position定位,float浮动,实在不行还有弹性盒display:flex;还有一种方法就是display:inline-block;将其变成行内块元素,便可以水平排列,但是问题就出现在了这里,当我们设置display:inline-block;后会出现第二幅图的情况
要解决这个问题其实也很简单,只需要将vertical-align的值改为top、middle等其他的值就可以了。