如图, 两个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 UGUI实现Button按钮长按状态的判断

    代码: using UnityEngine.EventSystems; using System.Collections; /// <summary> /// 脚本位置:UGUI按钮组件身 ...

  2. 【BZOJ】2440: [中山市选2011]完全平方数（莫比乌斯+容斥原理+二分）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2440 我觉得网上很多题解都没说清楚...(还是我太弱了? 首先我们可以将问题转换为判定性问题,即给出 ...

  3. Java8：使用 Optional 处理 null

    写过 Java 程序的同学,一般都遇到过 NullPointerException :) —— 为了不抛出这个异常,我们便会写如下的代码: User user = getUserById(id); i ...

  4. 编程之美 set 2 精确表达浮点数

    有限小数和无限循环小数转化成分数 比如 0.9 ->  9/10 0.333(3) -> 1/3 解法 1. 主要涉及到一个数学公式的计算. 2. 对于有限小数, 分子分母求最大公约数即可 ...

  5. Fragment遇到的坑

    Fragment不要通过构造传参,要么就是bundle,要么就通过activity临时存一下,不然debug编译没问题release编译不过

  6. px像素单位与IOS像素单位的换算

    本文转载至  http://blog.csdn.net/fanyuna/article/details/24032663 30px转成磅为单位＝22磅＝二号 磅=(像素/96)*72 =(30/96) ...

  7. Spring学习笔记 7.1 Spring MVC起步

    7.1.1 跟踪Spring MVC的请求请求首先到达DispatcherServlet(DispatcherServlet是Spring MVC中的前端控制器):DispatcherServlet的 ...

  8. Myeclipse创建Maven项目

    1.右击new创建一个Maven Project: 点击Next 继续Next Finish 2.项目成功创建后,项目目录主要有:主代码目录.主资源目录.测试代码目录.测试资源目录.输出目录(代码编译 ...

  9. 85、android handler的警告Handler Class Should be Static or Leaks Occur

    转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1106/1922.html 在使用Handler更新UI的时候,我是这样写 ...

  10. Android StaggeredGrid 加下拉刷新功能 PullToRefresh

    https://github.com/etsy/AndroidStaggeredGrid  用的github上面提供瀑布流,继承于abslistview,回收机制不错,并且提供了OnScrollLis ...