布局inline-block问题
当在一行中需要展示多个拥有块级属性的标签元素时,通常选择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问题的更多相关文章
- 页面布局排版-block,inline,float,relative,absolute等
1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- [ext4]04 磁盘布局 - Meta Block Groups
Meta Block Groups,可以翻译为元块组集. 如果不采用Meta Block Groups特性,在每个冗余备份的超级块的后面是一个完整的(包含所有块组描述符的)块组描述符表的备份.如前所述 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
随机推荐
- Hbase各版本环境要求
1.HBase各版本JDK支持情况 HBase Version JDK 7 JDK 8 JDK 9 JDK 10 2.0 Not Supported yes Not Support ...
- 解决讨厌的警告 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
问题: 执行任何hadoop命令,都会提示如下WARN.虽然影响不大,但是每次运行一个命令都有这么个WARN,让人很不爽,作为一个精致的男人, 必须要干掉它. [root@master logs]# ...
- Ubuntu 18.04 启用 rc.local 设置开机启动
ubuntu18.04 不再使用initd管理系统,改用systemd. 然而systemd很难用,改变太大,跟之前的完全不同. 使用systemd设置开机启动为了像以前一样,在/etc/rc.loc ...
- javascript连连看
经测试,IE,Firefox,Chrome,Opera可用. 连接线最多2个拐角.秘籍为:开始后连续输入zycjwdss 还剩0对 对数字 高度: 宽度: // 0)return 1;//IE i ...
- Indent Guides插件格式代码
vs开发工具实用性插件 一. 在开发遇到过很多括号缩近的,很是头疼,于是上网收了一下,希望对大家有所帮助. 第一款插件:Indent Guides 这款插件是给代码块增长对齐线,以标识匹配的花括号 ...
- 一些常用的js循环,如for
https://blog.csdn.net/u014399368/article/details/82862444
- JavaScript栈和队列
栈和队列:JavaScrip没有专门的栈和队列,是[数组]模拟的 栈:一端封闭另一端打开 先进入的在最下面何时使用:永远使用最后进入数组的元素的时候,栈结构 队列:是一种遵从先进先出(FIFO)原则的 ...
- MySQL查询语句报错 sql_mode=only_full_group_by 问题
升级MySQL到5.7后,查询语句总是报sql_mode=only_full_group_by问题,总结归纳了两种解决方案,推存第二种解决方案. 报错信息: [Err] 1055 - Expressi ...
- SDWebImageRefreshCached
来源: http://blog.csdn.net/jiadabin/article/details/52129789 来源: http://blog.csdn.net/jiadabin/article ...
- altium designer 制作内部不铺铜的封装,如三极管下面禁止铺铜
制作封装的时候,按P键或菜单栏中点击place选项点选Polygon Pour Cutout.画一个原件禁止铺铜区域即可.