Kafka Java Out Of Memory mysql安装 cordova cmake datatables tree air 后台网站模板 一兆等于多少字节 java运行软件 vm虚拟化引擎 cad怎么重复上一次命令 字符串中包含某个字符串 kubernetes官网 python开发教程 python文件写入 python中文 python中re模块 python用什么数据库 java基础 java入门 java数组添加 java的环境配置 java方法 java中long dep 网络克隆 橄榄山快模 用流量打电话的软件 烧饼修改器打不开 有线网卡驱动下载 cmd命令数字雨 linux格式化硬盘 losecontrol 中文微信小程序API 固态硬盘有什么用 sprutcam exe文件反编译 this关键字
当前位置: 首页 > 学习教程  > 编程语言

css如何解决inline-block的错位问题

2020/8/31 12:16:58 文章标签:

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时出现这种问题要注意


本文链接: http://www.dtmao.cc/news_show_150006.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?