链接之间的未知空间

Question

我有三个链接：

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a>
<a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;</a>
<a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>

我有一些CSS样式：

.f_link{
height:38px;
padding-top:12px;
margin:0px;
color:gray;
}
.f_link:hover{
color:black;
text-decoration:none;
}

如何在FF 3.6，IE 8和某些版本的Google Chrome中显示此html：

这就是我希望它在我的三个主要浏览器中显示的方式：

我使用了萤火虫，它说这些链接之间没有填充或边距。那时那个空间是什么，我怎么能摆脱它呢？我愿意接受建议！

Answer 1

换行符应该被视为HTML中的单个空格。您可以将标记更新为此（在结束标记之前换行，但在下一个A标记之前没有空格）

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;
</a><a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;
</a><a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>

Answer 2

将float: left;添加到您的.f_link声明中，这将删除空格。

http://jsfiddle.net/wMwEQ/

此外，使用 作为间距是baaaad，即使这不是问题。

Answer 3

您可能需要略微更改布局以获得您正在寻找的结果...此外：

   About   

真的没必要。

HTML:
<ul class="my_list">
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
</ul>

CSS:
.my_list { overflow:hidden; } // Clear floats
.my_list li { float:left; list-style:none; margin:0; padding:0; }
.my_list li a { padding:0 10px; }

那应该做你想要的。

Answer 4

空格是</a>结束标记与后面的<a>开始标记之间的空格。删除标记中的空格，您应该具有所需的效果。

Answer 5

此问题的一个解决方案还包括div中的所有链接并设置div的font-size:0;，然后根据需要设置链接的字体大小。

您可以查看下面的小提示以获取更多信息

fiddle