CSS基础篇--如何解决inline-block元素的空白间距

风雨后见彩虹

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

我一般遇到这情况都会把li浮动起来,这样就没有间隙。但是解决这个未知间隙,还是有很多办法的,在w3cplus上提供了好几种解决办法。在这总结一下。

先看结构:

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

css代码:

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”的空白:如图:
图片描述

第一种就是改变html结构

结构一:

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

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

结构二:

图片描述

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

结构三:

<ul>
  <li>item1</li><!--
  --><li>item2</li><!--
  --><li>item3</li><!--
  --><li>item4</li><!--
  --><li>item5</li>  
</ul>

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

结构四:

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

结构四,我想是大家常用来解决这样的问题的方法吧

方法二:负的margin

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

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

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

当然有些文章介绍使用"-0.25em"来解决,这也是跟元素的字号有极大的关系。所以我个人建议不使用负的margin来解决这样的问题。

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

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

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下可问题依然存在:
图片描述

方法四:丢失结束标签

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

但是这样的方法是不推荐的。

方法五:jquery方法

html结构:

<ul class="removeTextNodes">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

css代码:

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代码:

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

其中contents()方法:查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容。
filter方法:筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点,则 nodeType 属性将返回 1。
如果节点是属性节点,则 nodeType 属性将返回 2。
元素或属性中的文本内容,则nodeType 属性将返回 3。

全兼容的样式解决方法

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

.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://segmentfault.com/q/101...
原文地址:http://www.w3cplus.com/css/fi...

阅读 4.1k

风雨过后见彩虹
对web前端的爱好与兴趣而来,收集、发表有意义的文章随笔问题,让知识沉淀积累,方便自己查阅,方便网友...
9k 声望
1.1k 粉丝
0 条评论
9k 声望
1.1k 粉丝
文章目录
宣传栏