删除无序列表中链接之间的间隙

Question

这必须是非常简单的事情，但是我只是没有看到它，因此希望能得到一些建议。

当鼠标悬停在不同的链接上时，我应用了CSS使不同的图像出现。 默认情况下，其中一张图像是背景jpg图像的一部分。 所有其他图像仅在鼠标悬停在相应链接上时显示。

问题：当我沿链接的行左右滑动光标或垂直上下滑动光标时，链接之间有大约4像素左右的间隙。 当光标位于间隙上方时，链接无效，因此顶部没有图像出现，并且背景图像也暴露出来，从而产生了闪烁。

问题：如何消除链接之间的间隙，使背景图像仅在光标悬停在链接上方时才可见？

先感谢您！

Answer 1

间隔很小的原因是，如果在两个元素之间有一个换行符或多个空格，浏览器会将所有这些折叠为一个空格。 正是您所看到的空间。

您需要执行以下操作（我知道标记看起来很丑）：

<div id="hero-links-container">
<ul> 
    <li>
        <a href="" id="hero-link-pianos"><div id="hero-image-piano"></div>Pianos</a><a href="" id="hero-link-woodwinds"><div id="hero-image-woodwinds"></div>Woodwinds</a><a href="" id="hero-link-percussion"><div id="hero-image-percussion"></div>Percussion</a><a href="" id="hero-link-music-education"><div id="hero-image-music-education"></div>Music Education</a><a href="" id="hero-link-brasswinds"><div id="hero-image-brasswinds"></div>Brasswinds</a><a href="" id="hero-link-strings"><div id="hero-image-strings"></div>Strings</a><a href="" id="hero-link-accessories"><div id="hero-image-accessories"></div>Accessories</a><a href="" id="hero-link-recorded-music"><div id="hero-image-recorded-music"></div>Recorded Music</a>
    </li>
</ul>
</div>