如图, 两个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. hdu 5065 数学题

    #include<iostream> #include<cmath> #include<cstdio> using namespace std; int A,B,y ...

  2. wireshark: no interface can be used for capturing in this system

    ubuntu14.04下使用wireshark找不到网卡... 解决方法: Open a terminal by pressing Ctrl+Alt+T and type the following ...

  3. （转）word尾注引文添加方式及相关问题

    word引文添加方式:http://www.office68.com/word/word-reference-add.html word通配符:http://www.3lian.com/edu/201 ...

  4. C++ STL迭代器与索引相互转换

    0 前言 C++ STL提供了vector.list等模板容器,极大地方便了编程使用. “遍历”是对容器使用的最常用的操作. 使用迭代器来遍历是最好最高效的遍历方法. 当然,对于有些容器的遍历除了使用 ...

  5. Spring配置文件总结

    http://blog.csdn.net/zhejingyuan/article/details/41042789

  6. iOS 圆角投影

    self.backgroundColor = [UIColor whiteColor]; self.layer.shadowColor = [UIColor lightGrayColor].CGCol ...

  7. Java四种会话跟踪技术

    1.cookie:2.session:3.隐藏表单域:4.URL重写

  8. 81、去除标题栏 Activity 和 AppCompatActivity

    [Activity ] requestWindowFeature(Window.FEATURE_NO_TITLE); [AppCompatActivity] getSupportActionBar() ...

  9. Android XListView下拉刷新、上拉载入更多

    source code: https://github.com/Maxwin-z/XListView-Android 提供了两个接口: a) IXListViewListener:  触发下拉刷新.上 ...

  10. 算法分析中最常用的几种排序算法（插入排序、希尔排序、冒泡排序、选择排序、快速排序，归并排序）C 语言版

    每次开始动手写算法,都是先把插入排序,冒泡排序写一遍,十次有九次是重复的,所以这次下定决心,将所有常规的排序算法写了一遍,以便日后熟悉. 以下代码总用一个main函数和一个自定义的CommonFunc ...