如图, 两个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. php -- 反射ReflectionClass

    反射类:ReflectionClass 反射就是将其他类的结构给反应出来,从而可以对类的结构进行了解便于对类的使用. ReflectionClass::export(类名); 返回结果为三个数组:常量 ...

  2. 【BZOJ】1617: [Usaco2008 Mar]River Crossing渡河问题（dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1617 裸dp,很好做. 设f[i]表示i头牛到对岸所需最小时间.sum[i]表示运i头牛到对岸的时间 ...

  3. 深入了解Java之虚拟机内存

    在讨论JVM内存区域分析之前,先来看一下Java程序详细运行的过程: -我们今天就来分析一下Java程序运行过程的-Runtime-Data-Area(运行时数据)-这一块" class=& ...

  4. IOS7开发～新UI学起（四）

    本文转载至 http://blog.csdn.net/lizhongfu2013/article/details/9166193 1.UITableView: UITableViewDelegate ...

  5. Imageview如何设置背景颜色

    ImageView.setBackgroundColor(android.graphics.Color.parseColor("#ffffff")); ImageView.setB ...

  6. eslint常规语法检

    "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 & ...

  7. Java基础ArrayList、Servlet与Filter

    一.技术分享 迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭代器通常被称为"轻量级"对象,因 ...

  8. 后端UI框架

    BootStrap EasyUI DWZ ExtJS

  9. Linux压缩解压缩（unzip，tar）

    unzip tar 常用解压缩命令: tar -zxvpf:解压缩 tar -zcvpf: 压缩 # tar [-j|-z] [cv] [-f 建立的檔名] filename... <==打包与 ...

  10. 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GROUP BY clause

    解决方法一: SET sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY','')); 优点:不用重启mysql 缺点:重启mysql后还会 ...