hover时行级元素变成了块级元素，导致位置错乱

在hover时，i元素变成了块级元素；
导致这两个元素各自占了一行；
最终导致样式错乱；

 <div class="demo">
      <!-- 添加图标  和 编辑图标 -->
      <i class="iconfont add-icon"></i>
      <i class="iconfont add-icon"></i>
</div>

.demo i{
  display: none;
}

.demo:hover i{
    // 导致这两个元素变成了块级元素；
    // 影响了样式，独自占领了一行
    //   display: block;

    // 解决办法
    display: inline-block;

}