4

我有一个菜单，我希望每个单独项目内的文本周围的所有空间都将用户带到指定的页面。在网上看了一圈，发现最好的解决办法就是将“a”显示设置为block，如下：

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 这是我遇到这个问题的谷歌浏览器 - 我目前没有在任何其他浏览器中检查它。

4

3 回答 3

10

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

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

a > img {
    float: left;
    border: none;
    padding-right: 5px;
    width: 1.8em;
    height: 1.8em;
}
于 2010-09-28T23:22:05.113 回答
2

我认为你最好的选择是去掉a元素的下划线文本装饰属性，将链接文本放在一个span通用类中，然后应用于text-decoration: underline该类。

于 2010-09-28T23:18:36.887 回答
0

我也有同样的疑问。该text-decoration设置none为我工作：

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

如前所述，您可以使用一个类来使其更通用。

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

于 2012-09-04T01:11:50.327 回答