开发者社区云计算文章正文

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

2022-05-12 119

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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;
}