代码之家 › 专栏 › 技术社区 › ClarkeyBoy

CSS链接的图像加下划线(“a”显示设置为块)

underline google-chrome css html

ClarkeyBoy · 技术社区 · 14 年前

我有一个菜单,我希望文本周围的所有空间,在每个单独的项目中,将用户带到指定的页面。我在网上四处查看,发现最好的解决方案是将“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;
}

非常感谢。

理查德

3 回复 | 直到 14 年前

Guffa 14 年前

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

可以通过浮动图像将其转换为块元素,这样它们就不是文本的一部分:

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

ngroot 14 年前

我认为您最好的选择是去掉 a 元素,将链接文本放在 span text-decoration: underline 去那个班。

Rudolf Real 12 年前

text-decoration 设置为 none 为我工作:

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

如前所述,您可以使用类使其更通用。

顺便问一下,当我在图片底部看到一些负号的时候,我的网站看起来很奇怪。然后我意识到这是一个潜在的问题。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前