使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。

不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。

先看下代码

HTML部分:

1
2
3
4
5
6
7
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
  margin0;
  padding0;
}
ul {
  list-stylenone outside none;
  padding10px;
  backgroundgreen;
  text-aligncenter;
}
ul li {
  display: inline-block;
  *displayinline;
  zoom: 1;
  background: orange;
  padding5px;
}

明显的可以看出,在inline-block的元素之间存在“4px”的空白:

上面截图是:IE8-9、Firefox、Safari等浏览器下的效果,换句话说,这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法:

方法一:改变HTML结构

简单一点的方法就是就是改变HTML的结构,你可以使用下面几种方法的任何一种都可以达到效果:

结构一:

1
2
3
4
5
6
7
8
<ul>
  <li>
  item1</li><li>
  item2</li><li>
  item3</li><li>
  item4</li><li>
  item5</li
</ul>

这种方法接近标签换行格式的写法,也更趋近阅读。

结构二:

1
2
3
4
5
6
7
<ul>
  <li>item1</li
  ><li>item2</li
  ><li>item3</li
  ><li>item4</li
  ><li>item5</li
</ul>

结构二和结构一几乎是一样,结束标签的“>”成了另一行的起始标签。

结构三:

1
2
3
4
5
6
7
<ul>
  <li>item1</li><!--
  --><li>item2</li><!--
  --><li>item3</li><!--
  --><li>item4</li><!--
  --><li>item5</li
</ul>

结构三的方法采用的是html的注释的方法,这种方法我想大家不太常见,不过同样能解决我们需要解决的问题。

结构四:

1
<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>

结构四,我想是大家常用来解决这样的问题的方法吧,下面我们来看看按上述几种方法写的效果:

方法一所说的是通过标签来解决,虽然问题是解决了,但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候,一旦你的HTML不是自己写,而是后台生成,就比如CMS来说,标签后台生成,此时,我想大家又要骂街了,这可怎么办?其实我们除了上面的方法,还可以使用CSS来解决的。

方法二:负的margin

很多地方讨论使用负的margin来解决,比如说:

1
2
ul{font-size:12px;}
ul li{margin-right:-4px;*margin-right:0;}

这种解决方法并不完美,如果你的父元素设置的字号不一样,可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。

当然有些文章介绍使用”-0.25em”来解决,这也是跟元素的字号有极大的关系。

所以我个人建议不使用负的margin来解决这样的问题。

方法三:设置父元素字体为0

第三种方法设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul {
  list-stylenone outside none;
  padding10px;
  backgroundgreen;
  text-aligncenter;
  font-size0px;
    }
ul li {
  display: inline-block;
  *displayinline;
  zoom: 1;
  background: orange;
  padding5px;
  font-size12px;
}

这样处理在Firexfox,chrome等浏览器下是达到了效果,可是在Safari下可问题依然存在:

按此来说,方法三也不是绝佳的好方法,用不用大家自己考虑。

方法四:丢失结束标签

说实在的,这种方法又回到了方法一,在html标签上动手脚。就是让“inline-block”元素丢失关闭标签

1
2
3
4
5
6
7
<ul>
  <li>item1
  <li>item2
  <li>item3
  <li>item4
  <li>item5
</ul>

样式基本不变,我们来看看效果:

这种方法虽然能达到各浏览器的兼容,但还是有一个前提,那就是“DOCTYPE”要选择对,在“XHTML”下可就问题又出来了。

方法五:jquery方法

最后在给大家提供一种jquery的方法:

HTML代码

1
2
3
4
5
6
7
<ul class="removeTextNodes">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul {
  list-stylenone outside none;
  padding10px;
  backgroundgreen;
  text-aligncenter;
  font-size12px;
}
ul li {
  display: inline-block;
  *displayinline;
  zoom: 1;
  background: orange;
  padding5px;
}

jQuery 代码

1
2
3
$('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
    }).remove();

最后一种方法是通过jQuery来改变“nodeType”的值,从而实现我们需要的效果。

上面讲述了多种方法,但要兼容多个浏览器版本,并不每种方法实用,以前常用的方法,这次测试并不兼容所有浏览器。要做到兼容所有浏览器,个人认为还是在html的标签上做一定的处理,或者采用最后一种方法,通过“jQuery”来改变“nodeType”值达到效果。

那么有关于“inline-block”的间距如何去除,今天就扯到这了,希望这篇文章对喜欢用inline-block的童鞋有所帮助。如果您有更好的方法,记得与我们一起分享,欢迎在下面的评论中留下您的经验,或者指正上面的不对之处。

更新:全兼容的样式解决方法

经过高人指点,使用纯CSS还是找到了兼容的方法,就是在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari:

1
2
3
4
5
6
7
8
9
10
11
12
13
.finally-solve {
  letter-spacing-4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing-4px;
  font-size0;
}
.finally-solve li {
  font-size16px;
  letter-spacingnormal;
  word-spacingnormal;
  display:inline-block;
  *displayinline;
  zoom:1;
}

转自  http://blog.csdn.net/clh604/article/details/8295856

inline-block元素的空白间距解决方法<转>的更多相关文章

  1. inline-block元素的空白间距解决方法

    方法1 <ul><li>item1</li><li>item2</li><li>item3</li><li&g ...

  2. inline-block元素的空白间距

    inline-block元素的空白间距 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  3. 排错-windows平台下访问oracle em出现空白的解决方法

    排错-windows平台下访问oracle em出现空白的解决方法 by:授客 QQ:1033553122 问题描述 IE浏览器本地访问oem,出现空白页面,就左上角有一行字符 http://loca ...

  4. 如何解决inline-block元素的空白间距 css 完美解决

    转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inli ...

  5. 如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

  6. 使用CSS如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

  7. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  8. div内的img下出现几像素的空白间距解决办法

    现象描述: 解决方法: 1.设父元素的font-size:0; 2.设img为display:block; 3.设img为vertical-align:middle;

  9. 打开 chm 帮助文件显示空白及解决方法

    有个很奇葩的解决方法:把 chm 文件用压缩软件压缩,然后用压缩软打开此压缩包,直接双击压缩包里面的 chm 文件 这虽然解决了问题,但是这不科学…… 分析:直接打开压缩包里面的文件,压缩包的文件是临 ...

随机推荐

  1. Error: Cannot find module 'express' 之 解决方案

    出现如题错误,是因为执行了#npm install -g express的缘故,express没有被写到package.json里面去. 解决也好办,在程序目录下执行#npm install expr ...

  2. Discuz常见小问题-如何禁止用户发言,快速删除某个用户的所有帖子

    用户-用户组,勾选批量编辑,然后点击批量编辑的链接   点击论坛相关-帖子相关,然后把指定用户组的允许发新话题设置为否,拉到底部,点击提交   以一个普通用户重新登录,尝试发帖报错,说明已经设置成功 ...

  3. 你们对LinearLayout线性布局中Layout_weight的误解

    帮人找个入门级别的书得负责任,自己先看一下有无缺陷,结果发现这个:(原文发在该书的论坛上,发现受众面太小了,无奈转到这个弃用很久的博客里,以后把心得慢慢发上来) Google Android开发入门与 ...

  4. Linux 监测磁盘常用的工具sar iostat vmstat

    Linux 检测内存常用的工具sar iostat vmstat #每秒刷新一次显示2次 sar -d 1 2 iostat -kx 1 2 vmstat -d 1 2 磁盘统计信息解释 tps 每秒 ...

  5. 〖Android〗(CM10.2)Android4.2/4.3中的boot.img打包方法(合适三星exynos4 CPU)

    #!/bin/bash - #=============================================================================== # # F ...

  6. 21-spring学习-springMVC实现CRUD

    结合业务层实现一共完成CRUD操作 1,定义一共IMessageServese接口 package com.SpringMVC.Service; import java.util.Map; impor ...

  7. Ubuntu和windows文件共享问题

    ubuntu访问windows共享文件夹(ubuntu桌面系统):          最简单的方法,随便打开一个文件夹,按Ctrl+L,然后地址栏敲smb://xxx.xxx.xxx.xxx(wind ...

  8. CRC文件解压缩问题

    CRC问题一般有三种可能1.你的硬盘出现坏道2.你的硬盘数据线受损3.还可能是主板和内存的问题 硬盘坏道的表现硬盘使用久了就可能出现各种各样的问题,而硬盘“坏道”便是这其中最常见的问题.硬盘出现坏道除 ...

  9. C#:向SqlServer数据库中插入imange类型

    using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi ...

  10. IO多路复用之poll

    1.基本知识 poll的机制与select类似,与select在本质上没有多大差别,管理多个描述符也是进行轮询,根据描述符的状态进行处理,但是poll没有最大文件描述符数量的限制.poll和selec ...