布局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" ...
随机推荐
- xtrabackup备份MySQL报错:InnoDB: Error number 24 means 'Too many open files'
xtrabackup备份MySQL报错:InnoDB: Error number 24 means 'Too many open files' 1.使用xtrabackup备份MySQL时出现如下报错 ...
- C# Enum 获取枚举属性
Enum使用 获取枚举属性 注意:扩展方法必须定义为静态类,静态方法中. public enum EnumPatientSource { [Description("住院")] I ...
- RN 的页面布局
从 https://blog.csdn.net/liangzelei/article/details/53965417转载 React Native布局详细指南 https://www.jiansh ...
- WEB 性能优化导图
看了一下网上对于web性能优化的一些帖子,不是很直观,花了点时间画了一个思维导图. refers: https://segmentfault.com/a/1190000011936772 https: ...
- 【转】使用Eclipse,将鼠标放在相应方法或字段等元素上时,无法显示提示
使用Eclipse编写java代码时,将鼠标放在相应方法或字段等元素上时,会有对应的说明或提示. 不过,常出现下面的问题: Note:An exception occurred while getti ...
- js 合并多行表格
最近在整理之前的工作记录,有很多信息是借鉴他人,亲测有效的,遗憾的是当初记录时没有留下来源,如侵权请联系fourOfour@163.com. 1.autoRowSpan函数的第一个参数是table的i ...
- android.support.v4.app.NotificationCompat引用包
在导入使用了ViewPage,ActionBar,Fragment的工程后出现错误,很有可能是没有导入4.0版本的支持包.本人也是碰到这个问题,特意搜索了一下,得到解决办法如下,记录下来,以免忘记. ...
- jquery中文档处理的总结
jQuery文档处理总结 1.返回值:append(content|fn) $("p").append("<b>Hello</b>"); ...
- java+Selenium+TestNg搭建自动化测试架构(1)实现代码和数据的分离
1.主要介绍介绍Java+Selenium+POM的自动化测试框架的搭建,第一个首先实现代码和账号URL等信息的分离.第二点支持跨浏览器,通过读取配置文件的方式实现. 1)将账号URL等信息添加在pr ...
- 关于matlab2018a版本错误使用 svmclassify 分类器
当我们照常使用分类器函数svmclassify时,2018版的matlab会报出以下错误: 解决办法: 1,下载libsvm(一般下载最新版本就ok了)包,并将其添加至matlab的toolbox文件 ...