如图, 两个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. Try中如果发现错误，即跳出try去匹配catch，那么try后面的语句就不会被执行

    例:public void print() throws Exception. 对于方法a,如果它定义了throws Exception.那么当它调用的方法b返回异常对象时,方法a并不处理,而将这个异 ...

  2. 《Programming with Objective-C》第七章 Values and Collections

    1.平台相关的数据类型 These types, like NSInteger and NSUInteger, are defined differently depending on the tar ...

  3. Unity中用触摸控制物体旋转和放大

    using UnityEngine;using System.Collections;using System.IO; public class ScaleAndRotate : MonoBehavi ...

  4. oh my zsh 切换 bash

    zsh切换bash bash切换zsh 切换bash chsh -s /bin/bash 切换zsh chsh -s /bin/zsh

  5. Spring_day01--课程安排_Spring概念_IOC操作&IOC底层原理&入门案例_配置文件没有提示问题

    Spring_day01 Spring课程安排 今天内容介绍 Spring概念 Spring的ioc操作 IOC底层原理 IOC入门案例 配置文件没有提示问题 Spring的bean管理(xml方式) ...

  6. 剑指 offer set 19 翻转单词顺序 && 字符串左旋

    题目 1. 翻转单词 student. a am I 转换成 I am a student. 2. 字符串左旋 abba 1 转成 bbaa 总结 1. 先对每个单词旋转, 再整齐旋转 2. 先翻转一 ...

  7. iOS开发之-- 从当前隐藏导航界面push到下一个显示导航界面出现闪一下的问题

    在修改项目代码的过程中,遇到一个问题,就是比如主页面的导航栏是隐藏的,但是需要push到别的页面,这个时候,会出现导航栏闪一下的情况, 下面是我写的一种方案,也就是在loadView这个生命周期函数中 ...

  8. JSP页面的生命周期

    JSP页面的生命周期:我们假设要访问的jsp页面是index.jsp.首先,用户发出请求index.jsp:服务器会判断是否是第一次请求:如果是的话,JSP引擎会把该JSP文件转换成为一个Servle ...

  9. 【NGUI】Unity3D UIGrid 排序、动态加载与销毁

    本帖最后由 Lucifer_H 于 2014-10-31 09:39 编辑 做 UIGrid 的动态加载是做游戏的装备列表时用到的,装备信息都是从后台发过来的,具体加载的代码如下: [C#] 纯文本查 ...

  10. hdu 1300(dp)

    一个模式的dp. Pearls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...