当在一行中需要展示多个拥有块级属性的标签元素时,通常选择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. UnicodeEncodeError: 'ascii' codec can't encode characters in position 1-5: ordinal not in range(128)

    原因是pip安装python包会加载我的用户目录,我的用户目录恰好是中文的,ascii不能编码.解决办法是: python目录 Python27\Lib\site-packages 建一个文件site ...

  2. 结对编程core_6

    林静雯PB16060913 李鑫PB16061107 对于这种结对的工作,由于有过电子设计实践的基础,大概知道建一个工程需要做的事,有点经验还是有帮助的. 一.问题要求: 1·主要功能是随机产生有效的 ...

  3. CentOS7 搭建 SVN 服务器

    CentOS7 搭建 SVN 服务器 介绍SVN: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上 ...

  4. CentOS7(64) yum安装、配置PostgreSQL 11

    一.安装postgresql11 1.Install the repository RPM: 添加RPM yum install https://download.postgresql.org/pub ...

  5. 使用Dockerfile创建镜像

    Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像. 一.基本结构 Dockerfile由一行行命令语句组成,并且支持以#开头的注释行. 一般而言,D ...

  6. winrar+目录穿透复现

    前言: 学习下该漏洞,记录下这是自动化复现,没有具体分析.菜逼只会用. 00x1: 漏洞简单描述: 该漏洞事一个由UNACEV2.dll代码库中的一个深藏已久的漏洞 当攻击者制作一个恶意的ACE文件时 ...

  7. RabbitMQ tutorial

    一.安装RabbitMQ RabbitMQ是一套开源(MPL)的消息队列服务软件,是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开 ...

  8. (转)SQLServer_十步优化SQL Server中的数据访问 三

    原文地址:http://tech.it168.com/a2009/1125/814/000000814758_all.shtml 第六步:应用高级索引 实施计算列并在这些列上创建索引 你可能曾经写过从 ...

  9. Ajax2简单的使用方式

    http://www.cnblogs.com/Ming8006/p/6142191.html

  10. GNU C和C99标准中的可变参数宏(variadic macros)

    用可变参数宏(variadic macros)传递可变参数表你可能很熟悉在函数中使用可变参数表,如: void printf(const char* format, …); 直到最近,可变参数表还是只 ...