我有这个样式表：
*{
padding: 0px;
margin: 0px;
}
a{
background:yellow;
}
还有这个网页：
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
结果：
如何使这些锚标记相互“接触”，去除中间不需要的空间？
谢谢 卢卡
【问题讨论】：
你可以使用弹性框：
div {
display: flex;
}<div>
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</div>或者如果你使用 Bootstrap：
<div class="d-flex">
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</div>【讨论】：
以上所有答案都显示了一些摆脱不需要的空白的巧妙方法，但我看不到我已经使用了近十年的那个；所以对于那些仍在与那个空白搏斗的人来说，这是另一个简单的解决方案——使用浮动！
HTML:
<div id="test">
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</div>
CSS:
#test {
overflow:hidden;
/* this isn't really required here but helps;
or use your preferred method for clearfix */
}
#test a {
float:left;
background: yellow;
}
jsfiddle:
http://jsfiddle.net/fjj7dsyx/2/
【讨论】：
把它们放在ul/li结构中怎么样？
#test li {
background:yellow;
float: left;
list-style: none;
}<ul id="test">
<li><a href="/blog/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>【讨论】：
li 中使用什么元素是被禁止的？我认为您可以使用大多数可用的元素。见the specs。内容模型是 'Flow content' ，这意味着您可以使用正文中可用的大多数元素。
我想我可能会找到一个很酷的方法来解决它:-)。我从使用<!-- comments --> 填充空的< span >s 等开始。
所以如果你想保持你的锚定新行结构并且不想要它们之间的空格......只需在行尾打开一个块注释并在新行上结束它之前新的< anchor >
像这样：
<div id="test">
<a href="/blog/">Home</a><!--
--><a href="/about/">About</a><!--
--><a href="/contact/">Contact</a>
</div>
【讨论】：
你可以使用这个技巧来摆脱空间：
HTML：
<div id="test">
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
</div>
CSS：
#test { font-size:0; }
#test a { font-size:16px; background:yellow; }
【讨论】：
:)来说是个好问题
链接之间的空格可能是由代码中的换行符产生的，但这实际上取决于您在哪个浏览器中获得这种行为（有些浏览器会忽略这些字符，有些则不会）。
尝试将所有三个标签放在一行中，并且它们之间没有空格。
<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>
【讨论】：
您需要删除标签之间的空格（在本例中为换行符）。一些浏览器将其呈现为空间。
【讨论】：