如图, 两个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. 【BZOJ】1691: [Usaco2007 Dec]挑剔的美食家（set+贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1691 懒得打平衡树了.... 而且multiset是很快的... 排到了rank1 T_T 贪心就是 ...

  2. 根据List<SqlParameter>返回sql条件(where后)

    /// <summary> /// 根据参数列表返回sql条件(where后) /// </summary> /// <param name="list&quo ...

  3. javascript实现打印功能

    <input name="b_print" type="button" class="ipt" onClick="print ...

  4. c++11——多线程

    c++11中增加了线程以及线程相关的类,很方便的支持了并发编程. 1. 线程 线程创建     使用std::thread创建线程,提供线程函数或者函数对象即可,并且可以指定线程函数的参数. #inc ...

  5. [SharePoint 2010] SharePoint 2010上多人同時編輯Office 2010文件

    Office 2010這個版本,提供了一個令人興奮的新功能,那就是它可以讓多人同時編輯一份Office 2010的文件. 這是一個很大的突破. 以往在與SharePoint搭配下的分享環境,檔案只能被 ...

  6. vue兄弟组件传值

    vue中除了父子组件传值,父传子用props,子传父用$emit,有时候兄弟组件之间也需要传值 1. 先定义一个中间件,src下面新建self.js import Vue from 'vue'; le ...

  7. Python--进阶处理2

    # ===================第二章:字符串和文本====================== # -----------------使用多个界定符分割字符串--------------- ...

  8. Python全栈day10（基础知识练习题）

    一,执行python的两种方式 1,写在脚本里面调用python执行,例如python test.py 2,  输入python在命令行交互执行,例如 python  >>> pri ...

  9. new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

    new运算符 - JavaScript | MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operator ...

  10. TestLink安装手册

    环境准备 系统CentOS Linux release 7.3.1611 (Core) 搭建LAMP所需的集成包 xampp-linux-x64-7.2.0-0-installer.run 下载地址 ...