inline-block元素的空白间距解决方法<转>

使用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

*{    margin :  0 ;    padding :  0 ; } ul {    list-style :  none  outside  none ;    padding :  10px ;    background :  green ;    text-align :  center ; } ul li {    display : inline- block ;    * display :  inline ;    zoom:  1 ;    background : orange;    padding :  5px ; }

 

明显的能够看出，在inline-block的元素之间存在“4px”的空白：

上面截图是：IE8-九、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-style :  none  outside  none ;    padding :  10px ;    background :  green ;    text-align :  center ;    font-size :  0px ;      } ul li {    display : inline- block ;    * display :  inline ;    zoom:  1 ;    background : orange;    padding :  5px ;    font-size :  12px ; }

 

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

按此来讲，方法三也不是绝佳的好方法，用不用你们本身考虑。

方法四：丢失结束标签

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

1 2 3 4 5 6 7

<ul>    <li>item 1    <li>item 2    <li>item 3    <li>item 4    <li>item 5 </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-style :  none  outside  none ;    padding :  10px ;    background :  green ;    text-align :  center ;    font-size :  12px ; } ul li {    display : inline- block ;    * display :  inline ;    zoom:  1 ;    background : orange;    padding :  5px ; }

 

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-size :  0 ; } .finally-solve li {    font-size :  16px ;    letter-spacing :  normal ;    word-spacing :  normal ;    display :inline- block ;    * display :  inline ;    zoom: 1 ; }

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