inline-block 会影响同一行元素的位置么

Question

遇到过几次类似的问题，一直没找到合适的解答来提问一下，结构如下图

下面是两种效果

这是没有加float: left;的效果，明显看到按钮往下掉了一点；

这个是加了float的效果，按钮位置正常。
不太清楚这是因为什么原因导致的，希望能帮忙解答一下。
还有就是如果是要实现这样的效果是用block还是inline-block。

Answer 1

因为 Bootstrap 给类名为 .btn 的元素添加了 vertical-align: middle 样式，而 vertical-align 默认取值 baseline, 而

middle 元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。

—http://www.zhangxinxu.com/wor...

反正一句话: 给你这个 span 加 vertical-align: middle 其实就好了，而此时你的 span 元素竖直方向的中心和这些按钮们是在同一水平线上的。。。