如图, 两个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. 部署到服务器-执行脚本-脚本传递参数-需要base on 执行传入的参数(被测环境的ip)

    测试脚本 # !/usr/bin/python # -*- coding:utf-8 -*- import sys sys.path.append("..") from utils ...

  2. 【BZOJ】1045: [HAOI2008]糖果传递（中位数）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1045 白书上有讲 没ac的坑点在,数据范围n<=1,000,000 #include < ...

  3. adb server is out of date.killing的解决办法

    当把手机连接到电脑端口运行adb程序调试时,出现了下面这样的情况: 分析:出错的原因是adb的端口被其他程序的进程占领了,所以要做的就是找到并kill该进程.     工具/原料   cmd.exe. ...

  4. python入门（七）：CGI编程

    CGI CGI(Common Gateway Interface),通用网关接口,HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序须运行在网络服务器上. CGI在其中扮演的是在we ...

  5. WinError 5

    IDE工具:pychrm 语言:python 在使用os模块修改路径名称时,总是会报 WinError 5 这个错误,就是拒绝访问,之前也遇见过,就是要操作的当前路径里有文件已经打开,代码不能再次访问 ...

  6. 工作流JBPM_day01：1-说明_MyProcessDesigner_流程设计器

    工作流JBPM_day01:1-说明 先只做请假功能,怎么做? (请假可以和考勤整合到一起) 1,银行(拿号---叫号---办理) 2,餐馆(点菜---上菜---结账) 3,网购(下订单--配送--收 ...

  7. Java Web项目BlogAutoGenerator编写日志1

    使用的数据库是MySQL,所以首先要在MySQL中创建database和表.建立数据库article_db,建立表blog,如下: create database article_db DEFAULT ...

  8. 《C#高级编程》学习笔记----c#内存管理--栈VS堆

    本文转载自Netprawn,原文英文版地址 尽管在.net framework中我们不太需要关注内存管理和垃圾回收这方面的问题,但是出于提高我们应用程序性能的目的,在我们的脑子里还是需要有这方面的意识 ...

  9. HDU4417 （Super Mario）

    题目链接:传送门 题目大意:一个大小为 n 的数组,m组询问,每组询问[x,y]内<=v的数的数量. 题目思路:主席树(注意询问时数组下标越界问题) #include <iostream& ...

  10. URL中?和#的区别（关于SSRF）以及mysql的secure-file-priv

    零,绪论 20180125日,忙! 瞎比比总结一下,来满足这是个日记的样子. 1.今天谈的并不是什么技术[当然也不是没有技术(都很基础)]而是瞎几把扯. 一.关于一种SSRF的检测绕过: 1.背景: ...