今天做了两个inline-block元素,出现左右两个元素顶端出现上下不对齐的情况(下图):

解决办法:

把应用 inline-block的元素加上 vertical-align: top;

.CSSElement{display: inline-block; vertical-align: top;}

display:inline-block左右元素上下不对齐的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  3. display inline or block

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  4. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  6. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  7. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  10. display:inline、block、inline-block三者之间的区别

    1. display:block就是将元素显示为块级元素. block元素的特点: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度:(<d ...

随机推荐

  1. Android webservice的用法详细讲解

    Android webservice的用法详细讲解 看到有很多朋友对WebService还不是很了解,在此就详细的讲讲WebService,争取说得明白吧.此文章采用的项目是我毕业设计的webserv ...

  2. ntlk_data安装小结

    <Python自然语言处理>用nltk.download()的方法安装书中所用语料库数据,不太好使.一是部分网友反映的下载很慢很慢,二是下载链接,无论书上.NLTK官网(http://nl ...

  3. c#中各类日期的计算方法,收藏

    DateTime startWeek = dt.AddDays(1 - Convert.ToInt32(dt.DayOfWeek.ToString("d")));  //本周周一D ...

  4. C#—WebService

    一.qq是否在线 1.添加Web引用    qqOnlineWebService cn.com.webxml.www.qqOnlineWebService shelly1 = new NIIT1109 ...

  5. 黑马程序员——【Java高新技术】——反射机制

    ---------- android培训.java培训.期待与您交流! ---------- 一.概述 1.Java反射机制:是指“在运行状态中”,对于任意一个类,都能够知道这个类中的所有属性和方法: ...

  6. HDU5128 细心、细心、细心

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5128 题意:给你n(n < 30)个点的坐标,然后让你求出这n个点能构成的两个最大矩形的面积,有 ...

  7. 黑马程序员:Java编程_面向对象

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 面向对象和面向过程都是一种思想,面向过程强调的是功能行为,面向对象是将功能封装进 ...

  8. lua class(table)

    自己看吧: Base = {x = 0,y = 0} ---原型表 Base.name = "luohai"Base.age = 22Base.sex = "man&qu ...

  9. Javascript中call函数和apply函数的使用

    Javascript 中call函数和apply的使用: Javascript中的call函数和apply函数是对执行上下文进行切换,是将一个函数从当前执行的上下文切换到另一个对象中执行,例如: so ...

  10. java取整和java四舍五入方法 转自董俊杰

    import java.math.BigDecimal; import java.text.DecimalFormat; public class TestGetInt{ public static ...