CSS链接图像带有下划线("a"显示设置为阻止)

Question

我有一个菜单,我希望在每个单独的项目中文本周围的所有空间将用户带到指定的页面.我环顾网络,发现最好的解决方案是将"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我在谷歌Chrome浏览器中遇到此问题 - 我目前尚未在任何其他浏览器中进行过检查.

Answer 1

图像是内联元素,因此它们被视为文本的一部分.这不是带下划线的图像,而是包含带下划线的图像的文本,因此它无助于防止图像下划线.

您可以通过浮动它们将图像转换为块元素,然后它们不是文本的一部分:

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