前端之家收集整理的这篇文章主要介绍了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时行级元素变成了块级元素，导致位置错乱所遇到的程序开发问题。
如果觉得前端之家网站内容还不错，欢迎将前端之家网站推荐给前端开发程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。