Удалите промежутки между ссылками в неупорядоченном списке

Это должно быть что-то смехотворно просто, но я просто не вижу его и ценю немного совета.Удалите промежутки между ссылками в неупорядоченном списке

Я применил CSS для создания разных изображений, когда мышь наводится на разные ссылки. Одно из изображений есть по умолчанию, являющееся частью фонового jpg-изображения. Все остальные изображения появляются только тогда, когда мышь нависает над соответствующей ссылкой.

Проблема: Когда я нажимаю курсор влево и вправо вдоль ряда ссылок, сверху или снизу по вертикали, между ссылками есть пробелы примерно 4 пикселя. Когда курсор находится над зазором, ссылки неэффективны, поэтому изображение не отображается сверху, а фоновое изображение отображается, создавая своего рода мерцание.

Вопрос: Как удалить промежутки между ссылками, сохраняя фоновое изображение только в том случае, если курсор наводится на его ссылку, но нигде больше?

Спасибо заранее!

источник

2013-04-17 Dimitri Vorontzov

Причина этого небольшого разрыва заключается в том, что если у вас есть разрыв строки или несколько пробелов между двумя элементами, браузер скроет все это до одного места. Точно пространство, которое вы видите.

Что вам нужно сделать, это следующее (я знаю, что разметка выглядит некрасиво):

<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>

источник

2013-04-17 21:53:34 Kenneth

Это частично решает проблему, @Kenneth, но не полностью. Не могли бы вы взглянуть, я обновил сайт, как вы сказали, спасибо. Горизонтально это работает, но есть все еще вертикальные промежутки, и изображение пианино раскрывается, когда мышь нависает над ними. –

Вертикальный зазор - это проблема с высотой линии и тем фактом, что вы вертикально выравниваете текст до базовой линии. Несколько решений: установите верхнюю часть ссылок на 5px =>, это увеличит высоту или установит вертикальное выравнивание на «верх». – Kenneth

Отлично, @ Кеннет, спасибо! –

Удалите промежутки между ссылками в неупорядоченном списке

ответ

Смежные вопросы