元素设为inline-block元素里有内容与无内容导致的错位问题

最新推荐文章于 2021-08-14 15:44:22 发布

辣姐什么鬼

最新推荐文章于 2021-08-14 15:44:22 发布

阅读量843

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/70606703

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

描述：一个div里放置三个span元素，三个span设置为display:inline-block;使其能在同一行显示并可以设置高度宽度

问题：span里有无内容会导致该span元素的位置错位

图：

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        div{width:1200px;height:100px;border:1px solid green; margin:100px auto;}
        div span{display:inline-block;width:200px;height:30px;color:blue;}
        .s1{background:#333;}
        .s2{background:#f85c5f;}
        .s3{background:yellow;}
    </style>
</head>
<body>
<div>
    <span class="s1">1</span>
    <span class="s2">2</span>
    <span class="s3">3</span>
</div>
<div>
    <span class="s1"></span>
    <span class="s2"></span>
    <span class="s3"></span>
</div>
<div>
    <span class="s1"></span>
    <span class="s2">2</span>
    <span class="s3"></span>
</div>
</body>
</html>

我们可以清楚的看到，第一个div和第二个div里的span元素里为都有内容和都没有内容，这时三个span在同一水平线上

第三个div里第一个和第三个span里没内容第二个有数字2，这时第二个span明显错位。

在ie8、chrome和firefox三个浏览器下都是这样的问题。

具体为什么会导致这个问题目前还没有找到解释以后找到原因会回来记录下来

以后有这种需求的我可能需要选择用浮动来做了_(:зゝ∠)_