在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 布局时,出现的间距问题的解决办法和相关说明的更多相关文章

  1. 【转】Android Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    重构了下之前自己的一个新闻客户端,全部使用了Fragment来进行页面切换,只有一个入口Activity作为程序的启动Activity,其中有一个界面需要调用摄像头识别二维码, 于是就会用到Surfa ...

  2. FluorineFx 播放FLV 时堆棧溢出解决 FluorineFx NetStream.play 并发时,无法全部连接成功的解决办法

    http://25swf.blogbus.com/tag/FluorineFx/ http://www.doc88.com/p-7002019966618.html  基于Red5的视频监控系统的研究 ...

  3. Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法

    Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 Win7 64位 + LoadRunner 11录制时弹不出IE的解决办法 1. 卸载IE9( 装了Win7 64位后,默认 ...

  4. Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法

    window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...

  5. 在ubuntu16.04+python3.5情况下安装nltk,以及gensim时pip3安装不成功的解决办法

    在ubuntu16.04+python3.5情况下安装nltk,以及gensim时pip3安装不成功的解决办法,我刚开始因为不太会用linux命令,所以一直依赖于python 的pip命令,可是怎么都 ...

  6. vbox 挂载共享文件时可能出现的问题以及对应的解决办法

    VMBox挂载共享文件时可能出现的问题以及对应的解决办法 如果出现“未能加载虚拟光盘***.iso 到虚拟电脑的错误” : 左边一栏,右键光盘,eject,再安装

  7. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  8. 使用WebView时软键盘遮挡H5页面解决办法

    简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...

  9. :input获得焦点时被弹出键盘挡住解决办法

    这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效.. 上代码 /*input框调起输入法盖住输入问题*/$('input[type="text" ...

随机推荐

  1. awk函数实现将点分式形式的掩码转换为十进制形式的掩码

    在用awk处理文本时,需要将源数据为点分式形式的掩码转换为十进制形式的掩码,下边的函数可简单实现: 转换功能函数cdr2mask function cdr2mask(mask_point) { num ...

  2. 占位符 css

    == 普通的英文半角空格   ==   ==   == no-break space (普通的英文半角空格但不换行)   == 中文全角空格 (一个中文宽度)   ==   == en空格 (半个中文 ...

  3. 6_12 油田(UVa572)<图的连通块DFS>

    有一家石油公司负责探勘某块地底下的石油含量,这块地是矩行的,并且为了探勘的方便被切割为许多小块.然后使用仪器对每个小块去探勘.含有石油的小块称为一个pocket.假如两个pocket相连,则这两个po ...

  4. JAVA基础学习(6)之使用对象

    6使用对象 6.1字符类型 6.1.1字符类型 char和int互相转换 //a比A大32 Scanner in=new Scanner(System.in); char c='B'; char c1 ...

  5. 在 Fabric 中使用私有数据

    本教程将演示收集器(collection)的使用,收集器为区块链网络上已授权的组织节点 提供私有数据的存储和检索. 本教程假设您已了解私有数据的存储和他们的用例.更多的信息请参阅 私有数据 . 本教程 ...

  6. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  7. ubuntu磁盘分配和挂载

    Linux(ubuntu)可以把分区作为挂载点,常用的几个挂载点.作用及一般应该分配的磁盘空间如下表所示: Markdown Extra 表格语法: 挂载点(目录) 建议大小 格式 作用 / 20G左 ...

  8. 【PAT甲级】1070 Mooncake (25 分)(贪心水中水)

    题意: 输入两个正整数N和M(存疑M是否为整数,N<=1000,M<=500)表示月饼的种数和市场对于月饼的最大需求,接着输入N个正整数表示某种月饼的库存,再输入N个正数表示某种月饼库存全 ...

  9. 【MySQL】存储引擎

    " 目录 #. MySQL支持的存储引擎 1. InnoDB 2. MyISAM 3. NDB 4. Memory 5. Infobright 6. NTSE 7. BLACKHOLE My ...

  10. selenium+python实现自动化登录

    工作需要实现一个微博自动登录的操作,在网上差了一些资料,决定使用selenium+python实现 selenium 是一个web的自动化测试工具,主流一般配合java或者python使用,我这里使用 ...