Html CSS锚定标记元素之间不需要的间距

我有这个样式表：

*{
    padding: 0px;
    margin: 0px;
}

a{

  background:yellow;

}

本网页：

<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>    

结果：

我如何使这些锚定标签“接触”彼此，删除之间不需要的空间

谢谢

---

Luca

您需要删除标记之间的空白（在本例中为换行符）。有些浏览器将其呈现为空格。

链接之间的空格可能由代码中的换行符生成，但这实际上取决于您在哪个浏览器中获得此行为（有些浏览器忽略这些字符，有些则不忽略）

尝试将所有三个标记放在一行中，并且它们之间没有空格

<a href="/blog/">Home</a><a href="/about/">About</a><a href="/contact/">Contact</a>

---

您可以使用此技巧清除空间：

HTML:

---

现场演示：

我想我可能会找到一个非常酷的方法来解决它：-）。我从使用

填充空的

开始

因此，如果你想保持你的锚在一个新的线结构，不希望他们之间的空间。。。只需在行的末尾打开一个块注释，并在new

像这样：

<div id="test">
    <a href="/blog/">Home</a><!--
    --><a href="/about/">About</a><!--
    --><a href="/contact/">Contact</a>   
</div>

---

和演示：

将它们放在ul/li结构中如何

#测试li{
背景：黄色；
浮动：左；
列表样式：无；
}

以上所有答案都展示了一些清除不需要的空白的简洁方法，但我没有看到我已经使用了近十年的方法；因此，这里有另一个简单的解决方案来解决您的老问题，适用于那些仍在处理空白的人--使用float

HTML:

<div id="test">
  <a href="/blog/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>   
</div>

jsfiddle:

您可以使用flexbox：

div{
显示器：flex；
}

Newlines，在大多数HTML上下文中，在渲染视图中创建一个空格。我想所有浏览器都会将空格折叠成一个空格字符？哪些不这样做？（我不是想诋毁你，我真的很感兴趣。）显然，有些=全部我没有使用每种web浏览器的经验，所以我没有做一个全面的声明…这是HTML标准的一部分-空白被压缩为一个空格。请小心使用此代码，因为它可能被web爬虫解释为滥用，因为您显式地将文本隐藏在包含链接的元素中。诚然，由于一个更高的特殊性规则，链接本身是可见的，但网络爬虫仍然会在一个容器中看到一堆链接，告诉它的所有祖先隐藏它们的文本内容。@holodoc你知道关于这方面的详细文章吗？这个问题到底有多严重？@aaaidan这对

：）来说是个好问题。

而且我也有问题，不再断开链接，它们都显示在一行上，因为换行符为0。我将#测试元素字体大小设置为：1px；问题解决了，谢谢你的精彩解决方案！我认为这实际上是最好的解决方案，因为ul>li无论如何都应该用于导航链接，因为它最适合访问性。您希望在禁止的

li

中使用什么元素？我认为您可以使用大多数可用元素。看见内容模型是“流内容”，这意味着您可以使用正文中可用的大多数元素。

<div id="test">
    <a href="/blog/">Home</a><!--
    --><a href="/about/">About</a><!--
    --><a href="/contact/">Contact</a>   
</div>

<div id="test">
  <a href="/blog/">Home</a>
  <a href="/about/">About</a>
  <a href="/contact/">Contact</a>   
</div>

#test { 
  overflow:hidden; 
 /* this isn't really required here but helps; 
 or use your preferred method for clearfix  */
}

#test a { 
  float:left; 
  background: yellow;
}