当在一行中需要展示多个拥有块级属性的标签元素时,通常选择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. AsyncTask 的 get post 封装

    1.get方法的封装AsyncTask public class DBUTil2 { public static interface Succee{ void onSuccee(String resu ...

  2. C语言volatile关键字的用法

    volatile关键字的意义在于让被关键字修饰的变量每次使用时都重新去主内存里读取变量,而不是从高速缓存去读取. int a = 1; 普通变量定义之后,若要使用它,都会 先把它的值从主内存拷贝到高速 ...

  3. 安装virtualbox须知

    sudo usermod -a -G vboxusers `whoami`

  4. RAM和Flash区别

    都是随机存储器,断电数据消失,但Flash有点不一样,它在消失数据之前,添加了一个""性质",这个性质能上电后再识别,且把这个信号返回到ram中,这样近似的把flash当 ...

  5. CentOS 6 update curl

    touch /etc/yum.repos.d/city-fan.repo vi /etc/yum.repos.d/city-fan.repo add the following: [CityFan] ...

  6. linux下批量查找UTF-8的BOM文件,并去除BOM

    首先查找看看有哪些文件包含BOM find . -type f -print0 | xargs -0r awk '/^\xEF\xBB\xBF/ {print FILENAME} {nextfile} ...

  7. innodb使用大字段text,blob的一些优化建议(转)

    原文 https://yq.aliyun.com/articles/9072 最近看到一些老应用,在表结构的设计上使用了text或者blob的字段:其中一个应用,对blob字段的依赖非常的严重,查询和 ...

  8. Java核心-多线程-并发控制器-CyclicBarrier同步屏障

    1.基本概念 中文译本同步屏障,同样来自jdk并发工具包中一个并发控制器,它的使用和CountDownLatch有点相似,能够完成某些相同并发场景,但是它们却不相同. 2.抽象模型 主要用来实现多个线 ...

  9. vs2017使用问题

    最近安装了新版本的Visual studio  2017,但是在使用的过程中遇到了这样一个问题.刚启动电脑后,打开vs2017是可以打开的,但是当关掉之后再打开就打不开了,但是任务管理器看可以看到有一 ...

  10. mysql 下的update select from的两种方式比较

    工作中遇到需要将一个表中的数据按照对应规则填入别的表中的情况 例如 表1 a a1    a2 11     90889 32     31241 12     52123 表2 b b1     b ...