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 我在 Google Chrome 中遇到了这个问题 - 我目前尚未在任何其他浏览器中检查过它。

Answer 1

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

您可以通过浮动图像将图像变成块元素，然后它们就不是文本的一部分：

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

Answer 2

我认为最好的选择是摆脱 a 元素的下划线文本装饰属性，将链接文本放在具有公共类的 span 中，然后应用 text-decoration: underline 到该类。

Answer 3

我也带着同样的疑问奔跑着。将 text-decoration 设置为 none 对我来说很有效：

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

正如之前所说，您可以使用一个类来使其更加通用。

顺便说一句，很好的问题，当我在图像底部看到一些减号时，在我的网站上看起来很奇怪。然后我意识到这是一个底层。

Answer 4

我尝试了评论中的所有方法都无济于事，对我有用的是修改包含所有标签的 div 。我有一种暗示，它们只有在处于绝对默认位置时才会带有下划线。这是每个标签包裹的 div，没有应用其他技巧。

.myDiv {
    display: flex; 
    justify-content: center;
    align-items: center;
}