如图, 两个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. 故如果要比较两个字符串是否相同可以对a调用equal

    故如果要比较两个字符串是否相同(而不是他们的地址是否相同).可以对a调用equal: System.out.println(a.equal(b)); equal用来比较两个对象中字符串的顺序. a.e ...

  2. 算法优化:rgb向yuv的转化最优算法

    朋友曾经给我推荐了一个有关代码优化的pdf文档<让你的软件飞起来>,看完之后,感受颇深.为了推广其,同时也为了自己加深印象,故将其总结为word文档.下面就是其的详细内容总结,希望能于己于 ...

  3. php -- 魔术方法 之 调用方法：__call()、__callStatic()

    方法重载:当调用一个不存在或者权限不够的方法的时候,会自动调用__call()方法 public function __call($name,$args){}  :用对象调用方法 public sta ...

  4. epplus excel数据导出(数据量有点大的情况) Web和Client

    Asp.net MVC后台代码 public ActionResult Export() { OfficeOpenXml.ExcelPackage ep = new OfficeOpenXml.Exc ...

  5. Ubuntu下Eclipse无法添加Tomcat7解决方法

    Ubuntu(Linux)下在eclipse中add一个tomcatserver时发现tomcat7无法选择,但是该tomcat已经在eclipse 的server->runtime envir ...

  6. hdu 4709:Herding（叉积求三角形面积+枚举）

    Herding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  7. linux下安装mysql-5.7.25

    1.下载对应安装包 https://dev.mysql.com/downloads/mysql/ 2.卸载旧版本mysql 列出旧版本MySql的组件列表  rpm -qa | grep mysql ...

  8. Tortoise SVN 使用

    1.添加文件或文件夹 2.删除文件或文件夹 ①If you want to delete an item from the repository, but keep it locally as an ...

  9. 干货 | 蚂蚁金服是如何实现经典服务化架构往 Service Mesh 方向的演进的？

    干货 | 蚂蚁金服是如何实现经典服务化架构往 Service Mesh 方向的演进的? https://www.sohu.com/a/235575064_99940985 干货 | 蚂蚁金服是如何实现 ...

  10. python AI(numpy,matplotlib)

    http://blog.csdn.net/ywjun0919/article/details/8692018 apt-cache policy python-numpy sudo apt-get in ...