CSS解决inline-block的错位问题_CSS

上一篇: 使用CSS3制作一个简单的进度条(d... 下一篇:利用CSS3伪元素实现逐渐发光的方...

CSS解决inline-block的错位问题

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了CSS解决inline-block的错位问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

废话不多说帖代码

html部分

<div class="positionleft">我是position方式的左边，占30%</div>
        <div class="positionright">我是position方式的右边，占70%</div>

css部分

 .positionleft {
           position: relative;
           display: inline-block;
           background-color: #8d8d8d;
           width: 30%;
           height: 20%;

       }
       .positionright {
           position: relative;
           display: inline-block;
           left: 0;
           background-color: #ff8888;
           width: 70%;
           height: 20%;
       }

显示效果

在这里插入图片描述

可以很明显的发现两个div块出现了错位，查阅资料发现是两个inline-block在中间有空格时会出现这样的现象

修改html代码如下

<div class="positionleft">我是position方式的左边，占30%</div> <div class="positionright">我是position方式的右边，占70%
</div>

仅仅是删除了两个div之间的空格我们查看一下效果
显示效果

在这里插入图片描述

问题解决

各位在使用文档格式化工具如prettier时出现这种问题要注意

总结

到此这篇关于CSS解决inline-block的错位问题的文章就介绍到这了,更多相关css inline-block错位内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的CSS解决inline-block的错位问题全部内容，希望文章能够帮你解决CSS解决inline-block的错位问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: 使用CSS3制作一个简单的进度条(d... 下一篇:利用CSS3伪元素实现逐渐发光的方...

猜你在找的CSS相关文章