布局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" ...
随机推荐
- 【python】python打包生成的exe文件运行时提示缺少模块
事情是这样的我用打包命令:pyinstaller -F E:\python\clpicdownload\mypython.py打包了一个exe程序,但是运行时提示我缺 少bs4模块然后我就去查pyin ...
- QNET,一款给力的APP弱网络测试工具
目前在测试移动设备上进行弱网络专项测试的方案主要有两种: 通过Android设备连接到PC上进行弱网络测试,比如Fiddler,Charles,NET-Simulator等.基本思路是在PC上装一个F ...
- windows下的拷贝利器robocopy
robocopy xxcopy http://www.cnblogs.com/zhanglei1371/p/6724167.html [转载]robocopy的用法 经常进行文件管理操作的朋友们,不满 ...
- maven向本地仓库导入jar包
如果maven工程的依赖jar包在网上找不到,那么只能自己打包,然后传到本地仓库,可以使用如下命令 mvn install:install-file -DgroupId=com.redis.redis ...
- python爬虫学习笔记(一)——环境配置(windows系统)
在进行python爬虫学习前,需要进行如下准备工作: python3+pip官方配置 1.Anaconda(推荐,包括python和相关库) [推荐地址:清华镜像] https://mirrors ...
- Kong(V1.0.2)loadbalancing
介绍 Kong为多个后端服务提供了多种负载平衡请求的方法:一种简单的基于DNS-based的方法,以及一种更动态的环形负载均衡器ring-balancer,它还允许在不需要DNS服务器的情况下使用se ...
- 操作系统实现线程的几种模式 和 java创建线程的3个方式
操作系统实现线程的几种模式 和 java创建线程的3个方式 这是两个概念 在操作系统中,线程可以实现在用户模式下,也可以实现在内核模式下,也可以两者结合实现. 1.实现线程的三种方式: (1)继承t ...
- # 20175311 2018-2019-2 《Java程序设计》第2周学习总结
## 教材学习内容总结 第二周我对如何运行java程序已经比较熟悉了,第二周更多的是注重程序内部的原理了. ## 教材学习中的问题和解决过程 - 问题1:看书时看到的一个例子,不是很懂它是怎么得出结果 ...
- JS代码简单一段即可破解QQ空间删除说说
代码如下: 简单的一段代码即可搞定啦!!是不是很简单! var delay = 1000; function del() { document.querySelector('.app_canvas_f ...
- jmeter接口测试-GET请求路径中包含特殊字符或中文导致Response400报错
问题描述:接口测试中异常用例GET请求路径中包含特殊字符或中文,运行jmeter会报错,取样器中只能看到Response400,响应结果为空 解决思路: 对于通过BODY发送的中文内容可以用Jmete ...