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都能解决。