当在一行中需要展示多个拥有块级属性的标签元素时,通常选择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. springboot Cacheable(redis),解决key乱码问题

    import org.springframework.context.annotation.Bean; import org.springframework.data.redis.core.Redis ...

  2. iBatis.Net的基本情况和运行原理

    转载http://www.cnblogs.com/13590/archive/2013/02/27/2934580.html 摘要:介绍iBatis.Net的基本情况和运行原理,运行环境中各参数的配置 ...

  3. Windows Server 2008 R2 /2012 修改密码策略

    今天建了域环境,在添加新用户的时候,发现用简单的密码时域安全策略提示密码复杂度不够,于是我就想在域安全策略里面把密码复杂度降低一点. 问题:    在“管理工具 >> 本地安全策略 > ...

  4. win10 家庭版 升级 win10企业版

    更改秘钥 我的电脑(右键)->属性-> 更改产品秘钥 -> 96YNV-9X4RP-2YYKB-RMQH4-6Q72D->重启系统 如果秘钥过期了,就百度按时间搜索,总有一个是 ...

  5. pll时钟延迟为问题

    pll时钟延迟为问题 这关系到pll的工作方式,如果pll内部使用的是鉴频器,则输入和输出将没有固定的相位差,就是每次锁定都锁定在某个相位,但每次都不一样.如果使用的是鉴相器,则输入和输出为0相位差. ...

  6. c# listview数据预览(转载的放在这里备用)

    public class PrintListView : ListView { /// <summary> /// 指示是否进行打印预览,默认值为 true /// </summar ...

  7. (一)CentOS6.3安装Hadoop2.6.5

    1.准备环境 下载CentOS: https://www.centos.org/download/ 下载JDK: https://www.oracle.com/technetwork/java/jav ...

  8. (引用)!Unicode,GBK以及UTF8的联系和区别

    在实现单片机显示汉字的操作时,了解到有关汉字编码的相关概念. Unicode是一种字符集,该字符集可以涵盖世界上所有的语言.最常见的字符集是ASC II-0~127(0x00~0x7f).Unicod ...

  9. NodeJs Fs模块

    和前面的Http.Url模块一样,Fs模块也是node的核心模块之一,主要用于对系统文件及目录进行读写操作. 基本方法 fs.stat fs.stat可以用来判断是文件还是目录:stats.isFil ...

  10. YoLov3训练自己的数据集

    工具:labelimg.MobaXterm 1.标注自己的数据集.用labelimg进行标注,保存后会生成与所标注图片文件名相同的xml文件,如图.我们标注的是井盖和路边栏,名称分了NoManhole ...