如图, 两个display为 inline-block的元素,会出现情况

针对第三种情况:

需要添加

vertical-align: top;

参考代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

.test {

    border: 1px solid black;

    height: 50px;

    line-height: 50px;

    width: 50px;

    display: inline-block;

    /* vertical-align: top; */

}

</style>

<title></title>

</head>

<body>

<span class="test"></span>

<span class="test">123</span>

</body>

</html>

　

inline-block布局错位问题的更多相关文章

  1. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  5. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  6. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  7. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  8. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  9. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. Unity获取文件夹下指定类型的文件数量

    有个文件夹里面有很多的图片,都是.png格式的,要是一个一个的拖到脚本上觉得很麻烦,就写了一个遍历添加的cars,变量是List<Sprite> 代码如下: using UnityEngi ...

  2. 【UVa】Partitioning by Palindromes（dp）

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=27&page=sh ...

  3. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  4. 1QT在线帮助文档

    http://www.kuqin.com/qtdocument/classes.html

  5. hdu 3085(双向bfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3085 思路:双向广搜,每次从M出发,搜三步,从G出发,搜一步,然后就是判断是否走到对方已经走过的格子, ...

  6. MVC框架图

    http://www.cnblogs.com/zgynhqf/archive/2010/11/19/1881449.html   MVC框架图 http://www.cnblogs.com/zhang ...

  7. 使用js里面的迭代器filter实现数组去重

    实现数组去重的方法很多,最原始的方法是一个值一个值的去遍历,写到空数组里面: let r=[],arr = ['a', 'b', 'c', 'a']; for(var i=0,len=arr.leng ...

  8. [SCOI2010]传送带[三分]

    //point(AB)->point(CD) 距离满足下凸性,用三分套三分实现 #include<cmath> #include<cstdio> #include< ...

  9. R语言中的一些函数

    1.控制输出数字的精度 format(123.123,digits=4) 输出4位数字123.1,如果整数超过4位,小数部分就全被略去. options(digits=4) 功能同上,不过在Rsess ...

  10. XXL-JOB分布式任务调度平台安装与部署

    配XXL-JOB分布式任务调度平台安装与部署