如何删除内联块 <a> 元素源代码中由换行创建的不可见边距

Question

我有一个<a> 元素作为具有固定宽度的内联块。我想将<a> 框并排显示，每行两个框（与first example 完全相同）。但是如果每个盒子元素都在源代码中的新行中（second example），盒子会获得一个不可见的边距，如果你看一下例子，你可以看到例如Chrome 开发工具。父包装器的宽度和内边距，以及每个盒子的边距都是精确计算的，因此添加的不可见边距将第二个盒子向下推到下一行。

我可以只使用第一个示例的代码（所有没有换行符的元素直接在彼此后面），但我想知道如何删除这个不可见的边距，以便两个框再次彼此相邻在包装器 div 中（就像在第一个示例中一样），即使每个 <a> 元素都在源代码的新行中。

例子：

1.) 代码中没有换行符（我想要的布局）：http://jsfiddle.net/mLa93/2/

2.) 代码中有换行符（<a> 元素更改布局后添加换行符）：http://jsfiddle.net/mLa93/3/

Answer 1

正如 fcalderan 建议的那样，父级上的 white-space:nowrap 应该可以工作。有关示例，请参阅http://jsfiddle.net/kkpKg/。如果没有，那么您一定是在做一些不同或错误的事情。

好的，现在我明白了:-)

最好的解决方案是省略换行符，但是如果您不希望这样做，最好的方法是将它们注释掉：

  <div id="wrap">
       <a href="#">box 1</a><!--
    --><a href="#">box 2</a><!--
    --><a href="#">box 3</a>
  </div>

如果这不可能，我唯一能想到的（并且当前浏览器支持）是将#wrap 中的 line-height font-size 设置为零并且返回链接中的原始大小：

#wrap {
  font-size: 0;
}
#wrap a {
  font-size: 14px;
}

Answer 2

Chris Coyier 发表了一篇关于这个问题的好文章：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

我没有意识到这个问题来自一年前！
由于您花了这么长时间试图弄清楚这一点，我做了一些研究并发现了一个类似的问题。我在这里调整了你的代码
solution
它现在应该可以工作了。因为你之前提到的浮动案例，我放置了 5 个块

编辑：问题是你的利润。您有 10 像素的填充和 10 像素的边距。如果您将 div 设为 230px (3x10px + 2x100px)，您将获得与第一个小提琴相同的效果。

Answer 4

尝试在父元素（链接的容器）上使用white-space:nowrap，并可能在链接上使用white-space: normal