关于css中的行内块状元素对齐问题

如图，所有小方块li设为固定宽高，在最后一个li后面加了一个span，span里面有文字，为什么同为display为inline-block元素后面却无法上下对齐呢？怎么解决？
我尝试过给span加个relative，然后向上偏移几个像素，但是我的li个数在需求里可能会增加，于是出现当增加后span又不对齐了（如下图），这是什么导致的，如何解决？

---

设置行高试试line-height

---

这个跟基线对齐有关系，如果你给写文字的那个span设置一个vertical-align:top,就可以对齐，具体原因如下：
从CSS2的可视化格式模型文档中可以看到：
inline-block的基线是正常流中最后一个line box的基线，除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible，这种情况下基线是margin底边缘。
举例：

<style>
    .dib-baseline{
        display: inline-block;
        width: 150px;
        height: 150px;
        border: 1px solid #cad5eb;
        background-color: #f0f3f9;
        margin-top: 20px;
    }
</style>
<span class="dib-baseline"></span>
<span class="dib-baseline">dib-baseline</span>

运行结果：

因为前面的盒子没有任何字符，此时它的基线就是它的底边缘，后面的盒子有文字，所以该盒子的基线就是文字的基线，二者基线对齐，现成如此效果。
如果把第二个盒子line-height:0，此时文字基线的位置，就是文字的垂直中心，所以：

这就是为什么出现这个问题的原因，通过改变对齐方式可以达到对齐。
具体关于vertical-align的讲解可以看看张鑫旭老师的CSS深入理解之vertical-align

---

你先写一个demo再说吧，应该就是行高、基线垂直对齐的问题