作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More
【场景如下】
1）编写css和html
<div class="" style="padding:10px;">
<div style="display:inline-block;">
<div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#ccc;border:1px solid #ccc;">
<label>one</label>
</div>
<div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#eee;border:1px solid #ccc;">
<span class="">two</span>
</div>
</div>
<div style="display:inline-block;height:35px;line-height:35px;padding:0 10px;border:1px solid #0ccdff;background:#0ccdff;color:#fff;cursor:pointer;">
<span>按钮</span>
</div>
</div>2）页面效果，两个行内元素出现错位
3）解决方案
使用垂直对齐的样式，vertical-align:middle
4）知道解决方法，但也要知道为什么会出现，这样能够加深理解，快速解决问题
把第一个inline-block内部div的float浮动去掉，效果如下
第二个inline-block会和第一个inline-block内部的最后一个div对齐
猜想，如果我只给第二个inline-block设置垂直水平顶部对齐vertical-align:top，那么有按钮则会和one对齐
5）综上分析，以上解决方法，只需要给按钮这个div设置垂直水平顶部对齐vertical-align:top样式即可
- 代码
<div class="" style="padding:10px;">
<div style="display:inline-block;">
<div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#ccc;border:1px solid #ccc;">
<label>one</label>
</div>
<div style="float:left;height:35px;line-height:35px;padding:0 10px;background:#eee;border:1px solid #ccc;">
<span class="">two</span>
</div>
</div>
<div style="display:inline-block;height:35px;line-height:35px;padding:0 10px;border:1px solid #0ccdff;background:#0ccdff;color:#fff;cursor:pointer;vertical-align: top;">
<span>按钮</span>
</div>
</div>
