如图, 两个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. freemarker1 一些内建函数和用法

    ${"   green mouse"?cap_first} -->   Green mouse  //字符串中的第一个单词的首字母大写 ${"ABCDF" ...

  2. WebGL中图片多级处理（FrameBuffer）

    在webgl的使用过程中,我们通常会想对texture进行多级处理并对其贴在表面显示 如对较精准的边缘检测,要先后使用灰度shader.模糊shader.边缘shader来进行处理,而每次的处理对象则 ...

  3. 开发环境eclipse for Mac 下的常用快捷键汇总(基本参照Win系，将Ctrl换为Command)

    最近迁移开发环境到Mac下,在豆瓣看到一个常用快捷键,去掉废话直接上干货 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + O ...

  4. 一 Android Studio 打包Egret App

    测试环境: Android Studio 2.3.2 Egret Engine 5.0.14 Egret Support5.0.12 官网教程:http://developer.egret.com/c ...

  5. 使用Fastjson生成Json字符串少字段属性（数据丢失）

    最后是控制台打印生成的结果如下:FastJson生成字符串是:{"id":"2","name":"节点1"," ...

  6. spring+springMVC中使用@Transcational方式管理事务的必须要配的东西。

    spring中管理事务的配置方式除了@Transcational还有使用aop等,本文介绍@Transcational方式. 关于这两种方式的选择: aop方式适合需要支持事务的方法或类较多,且方法和 ...

  7. java web页面跳转 总结

    Servlet中forward和redirect的区别 forward方式:request.getRequestDispatcher("/somePage.jsp").forwar ...

  8. DEDE的搜索页面支持arclist和channelartlist标签的操作方法

    很多朋友在使用dedecms进行网站开发时都会存在这样的问题,那就是dedecms的搜索页(search.php)与我们网站页面的模板的头 部.底部不一样,并且还不支持在搜索页调用其他某一栏目的文档. ...

  9. html 标签转译反转译

    如果要在 html 标签内原样插入带 html 标签的文字,通常都会被自动解析掉,比如: document.getElementsByTagName('div')[0].innerHTML=" ...

  10. cocos2dx-draw绘制

    [一]:函数   //1.设置绘制颜色 1.ccDrawColor4B("红","绿","蓝","透明"); //2.设 ...