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

发布时间:2022-01-14 发布网站:https://www.cnblogs.com/IwishIcould
前端之家收集整理的这篇文章主要介绍了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;

}

总结


以上是前端之家为你收集整理的hover时行级元素变成了块级元素,导致位置错乱全部内容,希望文章能够帮你解决hover时行级元素变成了块级元素,导致位置错乱所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。