当在一行中需要展示多个拥有块级属性的标签元素时,通常选择display:inline-block;

优点:不用设置浮动或定位,浮动脱离文档流还需要清除浮动,定位降低扩展性。

问题:

   1、标签元素之间会出现间隙(原因:inline-block拥有默认字体大小属性,包括标签的换行);

   2、当标签内容为空时,会造成布局错乱(原因:inline-block默认字体对齐方式是vertical-align:baseline;即底部对齐);

解决:

  间隙处理:

    1、给父级元素设置定位;

    2、元素标签不换行;

    3、父级元素的font-size:0;清除字体影响;

    4、浮动;

  布局错乱:

    1、浮动;

    2、定位;

    3、设置verticle-align:top;字体上对齐;(推荐!)

布局inline-block问题的更多相关文章

  1. 页面布局排版-block,inline,float,relative,absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  2. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

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

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

  4. inline,block,inline-block解析

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

  5. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  6. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  7. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  8. [ext4]04 磁盘布局 - Meta Block Groups

    Meta Block Groups,可以翻译为元块组集. 如果不采用Meta Block Groups特性,在每个冗余备份的超级块的后面是一个完整的(包含所有块组描述符的)块组描述符表的备份.如前所述 ...

  9. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  10. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. xtrabackup备份MySQL报错:InnoDB: Error number 24 means 'Too many open files'

    xtrabackup备份MySQL报错:InnoDB: Error number 24 means 'Too many open files' 1.使用xtrabackup备份MySQL时出现如下报错 ...

  2. C# Enum 获取枚举属性

    Enum使用 获取枚举属性 注意:扩展方法必须定义为静态类,静态方法中. public enum EnumPatientSource { [Description("住院")] I ...

  3. RN 的页面布局

    从 https://blog.csdn.net/liangzelei/article/details/53965417转载 React Native布局详细指南  https://www.jiansh ...

  4. WEB 性能优化导图

    看了一下网上对于web性能优化的一些帖子,不是很直观,花了点时间画了一个思维导图. refers: https://segmentfault.com/a/1190000011936772 https: ...

  5. 【转】使用Eclipse,将鼠标放在相应方法或字段等元素上时,无法显示提示

    使用Eclipse编写java代码时,将鼠标放在相应方法或字段等元素上时,会有对应的说明或提示. 不过,常出现下面的问题: Note:An exception occurred while getti ...

  6. js 合并多行表格

    最近在整理之前的工作记录,有很多信息是借鉴他人,亲测有效的,遗憾的是当初记录时没有留下来源,如侵权请联系fourOfour@163.com. 1.autoRowSpan函数的第一个参数是table的i ...

  7. android.support.v4.app.NotificationCompat引用包

    在导入使用了ViewPage,ActionBar,Fragment的工程后出现错误,很有可能是没有导入4.0版本的支持包.本人也是碰到这个问题,特意搜索了一下,得到解决办法如下,记录下来,以免忘记.  ...

  8. jquery中文档处理的总结

    jQuery文档处理总结 1.返回值:append(content|fn) $("p").append("<b>Hello</b>"); ...

  9. java+Selenium+TestNg搭建自动化测试架构(1)实现代码和数据的分离

    1.主要介绍介绍Java+Selenium+POM的自动化测试框架的搭建,第一个首先实现代码和账号URL等信息的分离.第二点支持跨浏览器,通过读取配置文件的方式实现. 1)将账号URL等信息添加在pr ...

  10. 关于matlab2018a版本错误使用 svmclassify 分类器

    当我们照常使用分类器函数svmclassify时,2018版的matlab会报出以下错误: 解决办法: 1,下载libsvm(一般下载最新版本就ok了)包,并将其添加至matlab的toolbox文件 ...