2

我很好奇为什么"Should not be underlined"下面的代码中仍然有下划线：

<html>
<head>
<style type="text/css">
.badge1-link { text-decoration: none; }
.badge1 { text-decoration: underline; }

.badge2-link {text-decoration: underline;}
.badge2 {text-decoration: none;}

</style> 
</head>
<body>
<a href="#" class="badge1-link"><span class="badge1">Underlined</span> | not underlined</a>
<br/>
<a href="#" class="badge2-link"><span class="badge2"> Should not be underlined</span> | Underlined</a>
</body>
</html>
4

5 回答 5

5

一旦一个锚标签被赋予了下划线，它就不能被部分删除，就像你建议的badge2

请参阅此链接：从链接中删除顽固的下划线。接受的答案有一些相同的评论。

您的问题的解决方案是从锚标记中删除下划线，然后像使用badge1一样添加部分下划线

于 2012-08-16T12:29:43.203 回答
5

display:inline-block可以解决问题。它对我有用。改变你的风格如下

.badge2 {display:inline-block;text-decoration: none;}
于 2017-01-30T10:49:25.360 回答
1

请使用:link伪类。

于 2012-08-16T12:20:04.757 回答
0

锚正在装饰跨度。文本装饰也可以是“上划线”，因此可以覆盖带下划线的文本。所以在这种情况下，css 的行为与预期的一样：锚没有在下划线的跨度下划线。

于 2012-08-16T12:25:25.437 回答
0

我一直有一个类似的问题：一个链接有一个蓝色的下划线，{text-decoration: underline;}什么也没做。我试过{text-decoration: underline;}了，虽然这确实摆脱了蓝线，但它用黑线代替了它。以我 200 的智商，我决定将下划线涂成白色：{text-decoration: underline white;}这解决了问题，哈哈。

于 2021-03-31T05:21:59.383 回答