当在一行中需要展示多个拥有块级属性的标签元素时,通常选择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. 优化IIS7.5支持10万个同时请求的配置方法

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. IIS7.5是微软推出的最新平台IIS,性 ...

  2. 使用Visual Studio给SQL生成测试数据

    参考:http://www.cnblogs.com/CareySon/archive/2012/02/20/2359444.html 使用VS2010的数据生成计划来生成测试数据 以下面两个表来做例子 ...

  3. 【转】Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置

    Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置 原贴:https://www.cnblogs.com/jackadam/p/8568833.html ...

  4. IO队列深度max_queue_depth对系统性能的影响

    前段时间,发生了一个问题引起了我对IO队列深度的研究. 存储服务器中linux kernel的mpt2sas驱动模块,将max_queue_depth设置为1024时,引起系统加载驱动时卡死,而调整为 ...

  5. php_screw安装,使用

    安装步骤:1. 下载源码:wget http://nchc.dl.sourceforge.net/project/php-screw/php-screw/1.5/php_screw-1.5.tar.g ...

  6. C# 创建Datatable 并插入数据

    DataTable dt_temp = new DataTable(); dt_temp.Columns.Add("id"); dt_temp.Columns.Add(" ...

  7. tensorflow学习001——MNIST

    1.MNIST是一个入门级的计算机视觉数据集,它包含各种手写数字图片 数据集被分成两部分:60000行的训练数据集(mnist.train)和10000行的测试数据集(mnist.test). 这样的 ...

  8. 远程连接mysql8.0,Error No.2058 Plugin caching_sha2_password could not be loaded

    通过本地去连接远程的mysql时报错,原因时mysql8.0的加密方法变了. mysql8.0默认采用caching_sha2_password的加密方式 第三方客户端基本都不支持这种加密方式,只有自 ...

  9. Git世界历险记

    Git-版本管理器 Git  ||属于分散型版本管理系统,是为版本管理而而设计的软件.(Linux的创始人Linus Torvalds在2005年开发了Git的原型程序,在此之前人们大多选用Subve ...

  10. AS错误:Manifest merger failed with multiple errors, see logs

    gradlew processDebugManifest --stacktrace 在as命令行输入 回车看到 往上滑, 就能看到错误的详细信息,图中这个错误应该不是我原来的错误,是因为我按照网上的方 ...