CSS中的overflow: hidden会使旁边的元素错位

这是我原来的布局，总体是

编号标题数目

但是因为标题可能太长，于是给a加上了超出的话就用省略号的方法，结果我一加overflow：hidden，叛变的i标签的内容和span内容就掉到下面了

就像这样，对不齐了，求大神说说这事什么情况
附上样式代码：

#hot_list li{
height:33px;
line-height:33px;
font-size:14px;
border:1px solid red;
display:inline-block

}

#hot_list li i{
height:33px;
width:33px;
line-heihgt:33px;
display:inline-block;
text-align:center;
}

#hot_list li a{
height:33px;
width:200px;
line-height:33px;

display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#hot_list li span{
display:inline-block;
height:33px;
line-height:33px;
width:45px;
text-align:right

}

解决办法：
首先，i a span 都左浮动，并且给li清除浮动。
然后给li设置行高，如果这个时候还不行的话，给a设置vertical-align:middle;
行内块很多时候并没有浮动好用

确实是在父元素上加vertical-align解决，但是原理没说清楚，当改变overflow属性的时候会生成一个新的box，而默认的vertical-align是baseline，所以会导致错位。只要加任意vertical-align属性，无论top, bottom, 还是middle都能解决。