如何在inline-block <a>元素中删除源代码中换行符创建的不可见边距

Question

我有一个<a>元素作为具有固定宽度的内联块.我想显示<a>彼此相邻的方框,每行两个方框(与第一个示例中的方框完全相同).但是如果每个box元素都在源代码中的新行(第二个示例)中,那么这些框会获得一个不可见的边距,如果你看一下例如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#wrap

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

Answer 2

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

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