如图, 两个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. UML概述

    UML (Unified Modeling Language)统一建模语言,是描述.构造和文档化系统制品的可视化语言,是一种图形表示法. UML用途:UML是一种工具,主要用在我们对软件用面向对象的方 ...

  2. chmod 4777？ 文件特殊权限 SUID SGID StickyBit

    故事引入 今天碰到了一条指令, test 怎么在777前还有一位,颠覆了我的认知啊,这时候必须翻鸟哥神书了,找到一个链接<7.4.3 文件特殊权限:SUID/SGID/Sticky Bit> ...

  3. 一老掉牙的故事、是一个阿Q还是另一道曙光

       几年前曾经看到过这个故事,当时以为自己要怎样怎样!可结果似乎不那么美好!    几年人生美好广景,几年依然碌碌无为,不沉着.不冷静.不务实.不圆滑.不老练.不勇敢.不勤劳,关键不聪明,无毅力.着 ...

  4. Spring_day02--AOP概念、原理、操作术语

    AOP概念 hibernate要手动进行事务操作,在spring中通过配置文件来配置事务 1 aop:面向切面(方面)编程,扩展功能不修改源代码实现 2  AOP采取横向抽取机制,取代了传统纵向继承体 ...

  5. DNS rebinging攻击方式

    一.什么是DNS rebinding? 在dns协议中,请求和响应完成一台机器对一个域名的查询,响应信息包含请求域名站点对应的IP地址.假设你向DNS服务器A请求域名youself.domain.co ...

  6. js原型链和继承

    在了解js原型链之前构造函数.原型对象.对象实例这几种概念必须要明白. 1. 创建对象有几种方法 //原型链指向objectvar o1={name:'o1'}; var o11=new Object ...

  7. 实现返回top功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【Python Programe】使用Python发送语音验证

    使用Python向手机发送语音验证码,需要工具有: virtualenv 创建独立运行环境 Twilio 帐号去调用相应的API Twilio 的python库,5.7.0版本 1.使用 virtua ...

  9. 直接IO 零拷贝 DAM 自缓存应用程序

    直接IO  零拷贝  DAM  自缓存应用程序

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

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