布局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" ...
随机推荐
- 用anaconda安装tensorflow
conda create -n tensorflow python=2.7 conda activate tensorflow / source activate tensorflow anacond ...
- 工控随笔_04_西门子_解决Step 7软件因授权问题不能打开的方式和方法
西门子的软件是授权软件,只有经过授权认证的用户才能使用,如果没有通过授权认证则不能 正常的使用软件的相关功能. 一.西门子授权不成功问题 如上图所示报故障代码: 000001-0505.报警文本为:未 ...
- 重置SQLSERVER表的自增列,让自增列重新计数
SQL的自增列挺好用,只是开发过程中一旦删除数据,标识列就不连续了 写起来 也很郁闷,所以查阅了一下标识列重置的方法 发现可以分为三种: --- 删除原表数据,并重置自增列truncate table ...
- 复制虚拟机vmware centos搭建集群节点过程中网络配置eth0和eth1遇到的问题以及NAT模式下虚拟机静态IP配置方法
在centos中安装完第一个虚拟机后,一般习惯通过克隆的方式创建其它虚拟机,开后vmware无法发现网卡信息,系统认为这是重新安装,所以重新创建了一个新的网卡叫eth1. 并且用IFCONFIG-a查 ...
- python读写文件\r\n问题
newline controls how universal newlines mode works (it only applies to text mode). It can be None, ' ...
- Spring Data Solr相关配置
1.增加Maven POM文件的存储库:pom配置如下: <repositories> <repository> <id>spring-milestone</ ...
- 【Eclipse】_Eclipse自动补全增强方法 & 常用快捷键
一,Eclipse自动补全增强方法 在Eclipse中,从Window -> preferences -> Java -> Editor -> Content assist - ...
- Elasticsearch-6.7.0系列(一)9200端口 .tar.gz版本centos7环境--下载安装运行
https://www.elastic.co/guide/index.html(推荐) ES官方英文原版文档,一般会更新到最新版本 https://www.elastic.co/cn/d ...
- js和php刷新页面的方法
js中3个最优的刷新页面的方法 window.location.reload(): window.history.go(0): document.execCommand(''Refresh''): p ...
- day1--一个简单的登录接口
_usrename = "Yvan"_password = "abc123"count=0while count <3: username = in ...