Связанные изображения CSS подчеркнуты («a» установлен на блокировку)

У меня есть меню, для которого я хотел, чтобы все пространство вокруг текста в каждом отдельном элементе позволяло пользователю перейти на указанную страницу. Я огляделся в Интернете и обнаружил, что лучшим решением будет установить «» дисплей блокировать следующим образом:Связанные изображения CSS подчеркнуты («a» установлен на блокировку)

a { 
    display: block; 
    height: 100%; 
    text-decoration: underline; 
}

мне удалось получить эту работу отлично, но хотите поместить изображения в некоторых из них - как значок календаря для опции событий. Я замечаю, что он также подчеркивает ссылки. Есть ли способ избавиться от этого? Ссылки имеют padding-right, установленный на 5px, если это помогает сузить причину/решение.

Таким образом, все соответствующий код выглядит следующим образом:

a { 
    display: block; 
    height: 100%; 
    text-decoration: underline; 
} 
a > img { 
    text-decoration: none; 
    border: none; 
    padding-right: 5px; 
    width: 1.8em; 
    height: 1.8em; 
}

Большое спасибо заранее.

С уважением,

Ричард

PS Это Google Chrome, в котором я с этой проблемой - я в настоящее время не проверил его в других браузерах.

источник

2010-09-28 ClarkeyBoy

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

Вы можете включить изображения в блок элементов, пуская их, то они не являются частью текста:

a > img { 
    float: left; 
    border: none; 
    padding-right: 5px; 
    width: 1.8em; 
    height: 1.8em; 
}

источник

2010-09-28 23:22:05 Guffa

Большое спасибо спасибо спасибо! Сэкономит мне много времени и сил. Я попробовал отображение: блок на изображениях (как советовали на другом сайте), но мне даже не приходило в голову попробовать поплавок. – ClarkeyBoy

Вы можете обнаружить, что использование свойств background-image и background-position является еще лучшим решением. Это зависит от того, каково содержание изображений, я полагаю. – Casey

@Casey: Хорошая точка. Фоновые изображения не могут быть изменены, хотя это может быть ограничение в этом случае. – Guffa

Я думаю, что лучшим вариантом является, чтобы избавиться от подчеркивания текста украшения свойства для a элемента, поместить текст ссылки в span с общим классом, и применить text-decoration: underline к этому классу.

источник

2010-09-28 23:18:36 ngroot

Я боялся, что это был бы тот ответ, который я получил ... :(Спасибо в любом случае – ClarkeyBoy

Ваш пролет не нужен имя класса, просто наведите его на «a> span {}» – Casey

Гуффа получил правильный ответ - использование float: слева на изображения решает проблему !! Я тоже собирался добавить все промежутки. – ClarkeyBoy

я работала в том же сомнения. В text-decoration набор к none работает для меня:

<a href="..." style="text-decoration:none;"> 
    <img src="..."> 
</a>

Как сказал Befor, вы можете использовать класс, чтобы сделать это более общий характер.

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

источник

2012-09-04 01:11:50

Связанные изображения CSS подчеркнуты («a» установлен на блокировку)

ответ

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