刪除鏈接之間的空白在無序列表

Question

這必須是可笑簡單的事情，但我只是沒有看到它，並希望有一些建議。

我應用CSS來使鼠標懸停在不同鏈接上時出現不同的圖像。默認情況下，其中一個圖像是背景jpg圖像的一部分。所有其他圖像僅在鼠標懸停在相應鏈接上時纔會顯示。

問題：當我滑動光標左右沿着一排鏈接，或者垂直的頂部和底部，鏈接之間有空白，大約4px左右。當光標超出間隙時，鏈接無效，所以頂部不會出現圖像，並且背景圖像會顯示出來，從而產生一種閃爍現象。

問題：我該如何消除鏈接之間的空白，只有當光標懸停在其鏈接上時，才能保持背景圖像可見，但無處可以嗎？

預先感謝您！

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>