【转】去除inline-block元素的间隙

原文：http://www.cnblogs.com/2050/archive/2012/05/16/2504081.html

inline-block元素在布局时有一个明显的bug，inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。

解决方法分两种，一种是改变html结构法，另一种是css法

先说第一种，比如下面这段代码:

<ol>

<li>首页</li>

<li>关于我们</li>

<li>联系我们</li>

<li>加入我们</li>

</ol>

假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时我们可以换个写法：

<ol>

<li>首页</li

><li>关于我们</li

><li>联系我们</li

><li>加入我们</li>

</ol>

或

<ol>

<li>

首页</li><li>

关于我们</li><li>

联系我们</li><li>

加入我们</li>

</ol>

或

<ol>

<li>首页</li><!--

--><li>关于我们</li><!--

--><li>联系我们</li><!--

--><li>加入我们</li>

</ol>

以上三种写法都是可以的，总之就是避免让 </li>与<li>之间出现书面上的空格。

还有一种写法是去除闭合标签，如：

<ol>

<li>首页

<li>关于我们

<li>联系我们

<li>加入我们

</ol>

这种写法因为不符合html规范，所以还是避免使用为好

第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0，letter-spacing和word-spacing设为负数，然后再在inline-block元素中把这几个值恢复正常即可。

ul{

font-size:0;

letter-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/

word-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/

}

ul li{

display:inline-bolck;

zoom:1;

font-size:12px;

letter-spacing:normal;

word-spacing:normal;

}

去除inline-block元素间的空隙

inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。废话不多说了，直接讲解决方法吧。

总体来时可分为两种方法，一种是改变html结构法,另一种是css法。

先说第一种，比如下面这段代码:

<ol>

<li>首页</li>

<li>关于我们</li>

<li>联系我们</li>

<li>加入我们</li>

</ol>

假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时我们可以换个写法：

<ol>

<li>首页</li

><li>关于我们</li

><li>联系我们</li

><li>加入我们</li>

</ol>

或

<ol>

<li>

首页</li><li>

关于我们</li><li>

联系我们</li><li>

加入我们</li>

</ol>

或

<ol>

<li>首页</li><!--

--><li>关于我们</li><!--

--><li>联系我们</li><!--

--><li>加入我们</li>

</ol>

以上三种写法都是可以的，总之就是避免让 </li>与<li>之间出现书面上的空格。

还有一种写法是去除闭合标签，如：

<ol>

<li>首页

<li>关于我们

<li>联系我们

<li>加入我们

</ol>

这种写法因为不符合html规范，所以还是避免使用为好

ul{

font-size:0;

letter-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/

word-spacing:-4px; /*实际情况下 -4这个值可能还要调整*/

}

ul li{

display:inline-bolck;

zoom:1;

font-size:12px;

letter-spacing:normal;

word-spacing:normal;

}

转载于:https://www.cnblogs.com/Bideam/p/6958000.html

【转】去除inline-block元素的间隙相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
去除内联元素之间的间距
div{width:900px;} div a{ display:inline-block; width:300px;} <div> <a href="" ...
Python去除列表中元素的前后空格和换行
Python去除列表中元素的前后空格和换行一行代码搞定: p = [x.strip() for x in square if x.strip() != ''] #square是列表
inline, block, inline-block区别
inline, block, inline-block区别 inline Not height and width; Not margin-top & margin-bottom; Alway ...
python list每个重复元素保留一次,python 列表（list）去除重复的元素总结
方法一: 将list作为set的构造函数构造一个set,然后再将set转换会list就可以 >>> myList = [1, 2, 3, 3, 2, 2, 4, 5, 5] > ...
关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
行内块元素的间隙解决办法
在默认情况下,行内块元素(例如img.input)都存在间隙问题,例如说div中不写宽高的时候,给了个粉色的背景色,方便能看出div和图片之间的间隙,这时嵌套一个img,由图片撑开div,这时会明显的 ...
python 如何从列表中剔除（去除）重复元素？set()
方法1:用内置函数set() 方法2:遍历去除元素参考文章:python中如何去除列表中重复元素?

【转】去除inline-block元素的间隙

去除inline-block元素间的空隙

【转】去除inline-block元素的间隙相关推荐

最新文章

热门文章