如图, 两个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. c#后台List转为js对象（在前台操作）

    <!-- 用html标签防止html转义 (html.raw方法转双引号中的双引号时不会转义) --><input id="json" type="hi ...

  2. asp.net后台cs中的JSON格式变量在前台Js中调用方法(前后台示例代码)

    //后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  3. 学习《深入理解C#》—— 可空类型、可选参数和默认值 (第一章1.3)

    目录 C#可空类型 C# 可选参数和默认值 C# 可空类型 在日常生活中,相信大家都离不开手机,低头族啊!哈哈... 假如手机厂商生产了一款新手机,暂时还未定价,在C#1中我们该怎么做呢? 常见的解决 ...

  4. Hibernate_day03--课程安排_表之间关系_一对多操作

    Hibernate_day03 上节内容 今天内容 表与表之间关系回顾(重点) Hibernate的一对多操作(重点) 一对多映射配置(重点) 一对多级联操作 一对多级联保存 一对多级联删除 一对多修 ...

  5. THINKPHP5操作数据库代码示例

    数据库表结构 #表结构 CREATE TABLE `qrcode_file` ( `id` ) NOT NULL AUTO_INCREMENT, `active` ) ' COMMENT '是否有效' ...

  6. Android之布局属性归纳

    第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:layout_centerVertical 垂直居中android:layou ...

  7. dede标签:arclist标签使用大全

    特别提示:arclist是织梦建站系统中最重要的标签,同时也是最基础的标签,希望大家熟练掌握,可以说是学习织梦必备知识. 标签名称:arclist标记简介:织梦常用标记,也称为自由列表标记,其中img ...

  8. Zabbix的API的使用

    上一篇:Zabbix低级主动发现之MySQL多实例 登录请求(返回一个token,在后面的api中需要用到) curl -s -X POST -H 'Content-Type:application/ ...

  9. Python全栈day21（函数的解耦）

    针对上一篇对文件的操作程序,执行一次操作的函数查询,添加,修改,删除都需要在函数里面定义文件处理的过程,整体函数看起来比较乱,代码重复过多 下面新定义一个函数专门用于处理文件操作,然后在不同的函数里面 ...

  10. ubuntu 卸载 google-chrome

    sudo apt-get autoremove google-chrome-stable