咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 637|回复: 0

[CSS] CSS解决inline-block的错位问题

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-10-4 22:02:26 | 显示全部楼层 |阅读模式
    废话不多说 帖代码
    html部分
    1. <div class="positionleft">我是position方式的左边,占30%</div>
    2.         <div class="positionright">我是position方式的右边,占70%</div>
    复制代码
    css部分
    1. .positionleft {
    2.            position: relative;
    3.            display: inline-block;
    4.            background-color: #8d8d8d;
    5.            width: 30%;
    6.            height: 20%;
    7.        }
    8.        .positionright {
    9.            position: relative;
    10.            display: inline-block;
    11.            left: 0;
    12.            background-color: #ff8888;
    13.            width: 70%;
    14.            height: 20%;
    15.        }
    复制代码
    显示效果
    CSS解决inline-block的错位问题-1.png


    可以很明显的发现两个div块出现了错位,查阅资料发现是两个inline-block在中间有空格时会出现这样的现象
    修改html代码如下
    1. <div class="positionleft">我是position方式的左边,占30%</div> <div class="positionright">我是position方式的右边,占70%
    2. </div>
    复制代码
    仅仅是删除了两个div之间的空格 我们查看一下效果
    显示效果
    CSS解决inline-block的错位问题-2.png

    问题解决
    各位在使用文档格式化工具如prettier时出现这种问题要注意
    总结
    到此这篇关于CSS解决inline-block的错位问题的文章就介绍到这了,更多相关css inline-block错位内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章,希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/css/743214.html

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 21:27

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表