使用display inline-block 布局时,出现的间距问题的解决办法和相关说明
在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行。而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
使用 display inline-block 将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
请大家先看display inline-block 实际应用中的效果
.my-test { width: 100%; height: 50px;}
.my-test ul { }
.my-test ul li { list-style: none; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}
<div class="my-test">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
增加 display inline-block 样式
.my-test ul li { list-style: none; display: inline-block; vertical-align: middle; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}
这里有一个问题 :
li之间出现了外边距
解决这个问题的办法有两种:
1.li元素之间不换行
<div class="my-test">
<ul>
<li>1</li>
<li>2</li><li>3</li>
</ul>
</div>
如图,2和3之间未换行,外边距消失。
2.ul设置 font-size:0px;
如图,li之间的外边距都消失了。
继续思考 为什么li之间会出现外边距。
<div class="my-test">
<ul id="ulid">
<li>1</li>
<li>2</li><li>3</li>
</ul>
</div>
获取UL的子节点
可以看到,第一个li和第二个li之间有一个text的节点,而第二个li和第三个li之间并没有节点。
这里延伸出来新的问题 1.为何第一个text节点并没有导致第一个li出现外边距 2.text节点为何会导致出现外边距
关于第一个问题,猜测是因为浏览器自动帮忙处理了第一个节点,有知道原理的兄弟,请留言,拜谢。
第二个问题,text节点其实是一个回车,回车会被解析为一个空白符。空白符浏览器是作为一个半角空格来处理的。
.my-test ul {}
<div class="my-test">
<ul id="ulid">
<li>1</li>
<li>2</li> <li>3</li>
</ul>
</div>
在2和3之间手动加入一个空格
出现了外边距
这也解释了为何设置font-size:0之后,间距会消失的情况。
使用display inline-block 布局时,出现的间距问题的解决办法和相关说明的更多相关文章
- 【转】Android Fragment中使用SurfaceView切换时闪一下黑屏的解决办法
重构了下之前自己的一个新闻客户端,全部使用了Fragment来进行页面切换,只有一个入口Activity作为程序的启动Activity,其中有一个界面需要调用摄像头识别二维码, 于是就会用到Surfa ...
- FluorineFx 播放FLV 时堆棧溢出解决 FluorineFx NetStream.play 并发时,无法全部连接成功的解决办法
http://25swf.blogbus.com/tag/FluorineFx/ http://www.doc88.com/p-7002019966618.html 基于Red5的视频监控系统的研究 ...
- Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法
Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 1. 卸载IE9( 装了Win7 64位后,默认 ...
- Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法
window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...
- 在ubuntu16.04+python3.5情况下安装nltk,以及gensim时pip3安装不成功的解决办法
在ubuntu16.04+python3.5情况下安装nltk,以及gensim时pip3安装不成功的解决办法,我刚开始因为不太会用linux命令,所以一直依赖于python 的pip命令,可是怎么都 ...
- vbox 挂载共享文件时可能出现的问题以及对应的解决办法
VMBox挂载共享文件时可能出现的问题以及对应的解决办法 如果出现“未能加载虚拟光盘***.iso 到虚拟电脑的错误” : 左边一栏,右键光盘,eject,再安装
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 使用WebView时软键盘遮挡H5页面解决办法
简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...
- :input获得焦点时被弹出键盘挡住解决办法
这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效.. 上代码 /*input框调起输入法盖住输入问题*/$('input[type="text" ...
随机推荐
- awk函数实现将点分式形式的掩码转换为十进制形式的掩码
在用awk处理文本时,需要将源数据为点分式形式的掩码转换为十进制形式的掩码,下边的函数可简单实现: 转换功能函数cdr2mask function cdr2mask(mask_point) { num ...
- 占位符 css
== 普通的英文半角空格 == == == no-break space (普通的英文半角空格但不换行) == 中文全角空格 (一个中文宽度) == == en空格 (半个中文 ...
- 6_12 油田(UVa572)<图的连通块DFS>
有一家石油公司负责探勘某块地底下的石油含量,这块地是矩行的,并且为了探勘的方便被切割为许多小块.然后使用仪器对每个小块去探勘.含有石油的小块称为一个pocket.假如两个pocket相连,则这两个po ...
- JAVA基础学习(6)之使用对象
6使用对象 6.1字符类型 6.1.1字符类型 char和int互相转换 //a比A大32 Scanner in=new Scanner(System.in); char c='B'; char c1 ...
- 在 Fabric 中使用私有数据
本教程将演示收集器(collection)的使用,收集器为区块链网络上已授权的组织节点 提供私有数据的存储和检索. 本教程假设您已了解私有数据的存储和他们的用例.更多的信息请参阅 私有数据 . 本教程 ...
- layer.open中父页面向子页面传值
1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...
- ubuntu磁盘分配和挂载
Linux(ubuntu)可以把分区作为挂载点,常用的几个挂载点.作用及一般应该分配的磁盘空间如下表所示: Markdown Extra 表格语法: 挂载点(目录) 建议大小 格式 作用 / 20G左 ...
- 【PAT甲级】1070 Mooncake (25 分)(贪心水中水)
题意: 输入两个正整数N和M(存疑M是否为整数,N<=1000,M<=500)表示月饼的种数和市场对于月饼的最大需求,接着输入N个正整数表示某种月饼的库存,再输入N个正数表示某种月饼库存全 ...
- 【MySQL】存储引擎
" 目录 #. MySQL支持的存储引擎 1. InnoDB 2. MyISAM 3. NDB 4. Memory 5. Infobright 6. NTSE 7. BLACKHOLE My ...
- selenium+python实现自动化登录
工作需要实现一个微博自动登录的操作,在网上差了一些资料,决定使用selenium+python实现 selenium 是一个web的自动化测试工具,主流一般配合java或者python使用,我这里使用 ...