如何去除 Inline Block 元素之间的空格

问题是这样的:如果几个inline-block元素放在一起,它们的代码是按常见的HTML标准格式化,那么,在它们之间就会存留一些空格。

换句话说:

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

结果呈现出来是这样的:

我们通常是希望它们各个元素都紧贴对方,不留缝隙。具体到在上面的例子里,我们要实现一个导航条,在导航条目之间不应该保留不可点击的缝隙。

这并不是以bug。这只是将一些元素放置在一行上的一种布局方式。正如你在书写英文时单词之间要有空格。这些留着元素之间的空隙正如英文单词之间的空隙。也许你认为HTML的新规范里应该修改这种情况,让inline-block元素之间不留空隙,但我认为这一天很难到来。

下面是我给大家提供的一些消除这些缝隙的技巧,可以让这些inline-block元素肩并肩的紧紧的连接着对方。

1、去除它们之间的空白

它们之间之所以有缝隙,就是因为你在这些元素之间留有空白(换行符、tab等)。清除它们之间所有的空白,就能解决这些问题,这里有几种技巧:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

或者

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

或者使用注释符

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

这些做法都很怪异,但都能解决问题。

2、使用负的margin值

给它们施加一个-8px的margin值,也能使这些元素紧贴在一起,但这个负值并不是固定的,需要根据页面字体的大小来调整。

nav a {
  display: inline-block;
  margin-right: -4px;
}

3、不写闭合标签

HTML5并不在意你这样写代码。虽然这样做可行,但总是感觉怪怪的。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

4、将字体大小设置为零

如果这些空隙的font-size值为零,那它们的宽度也将为零。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

这种设置font-size: 0;的技巧在安卓手机上好像有些问题。Jellybean之前的版本根本无法去除这些空隙,而Jellybean里有一个bug,就是,有时候,最后一个元素上会出现一点小缝隙。

还有,如果你的字体大小使用ems单位,设置零大小的字体会出现问题,因为ems将会联级将子元素的字体大小也设置成零。Rems可以用,只要是非联级font-size方式都可以。

4、使用float来排列它们

事实上,我们可以完全不需要inline-block,我们可以使用float让它们紧密的排列在一起。但这个实现需要给它们设置宽度和高度,以及padding等东西。但是,这样一来,我们也就无法向对待inline-block一样使用text-align: center; 来居中它们了。

5、使用最新的flexbox技术

如果你不担心浏览器的兼容情况的话,而且你还想实现居中,这个时候可以使用flexbox技术。这种技术并不是一种完全可以替代其它方式的布局模式,但在这里完全解决我们的问题。你可以参考三分钟学会css3中的flexbox布局这篇文章。

效果示例

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号