Question

我有一个<a>元素作为具有固定宽度的内联块。我想显示彼此相邻的<a>框，每行两个框（与first example完全相同）。但是如果每个box元素都在源代码中的新行（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>

如果不是这种情况，我唯一可以想到的（并且当前浏览器支持）就是在{{{line-height font-size中设置{s> #wrap #wrap { font-size: 0; } #wrap a { font-size: 14px; } 1}}为零并返回到链接中的原始大小：

{{1}}

Answer 2

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

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

Answer 3

我没有意识到这个问题是从一年前开始的！
由于你花了很长时间试图解决这个问题，我做了一些研究并找到了类似的问题。我在这里调整了你的代码
solution
它现在应该工作了。由于你之前提到过的漂浮箱，我放了5个街区

编辑：问题是你的利润。你有一个10px的填充和10px的边距。如果你的div为230px（3x10px + 2x100px），你可以获得与第一个小提琴相同的效果。

Answer 4

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

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

4 个答案: