html - 由于锚标签，看起来很奇怪的破折号

Question

在图像右侧列出的元素中有一个看起来很奇怪的破折号，我一生都无法弄清楚，但是当我取出<a>标签时它就消失了。

知道是什么原因造成的吗？

Answer 1

这是链接的常规下划线。具体来说，图像标签后面的空白区域会被加下划线。

您可以将样式添加text-decoration: none;到链接以删除下划线：

.team-list-item a { text-decoration: none; }

或者，您可以在标记后写入div右侧img以删除空白，或者您可以使图像成为浮动到左侧的块元素：

.team-list.item img { float: left; }

但是，最后两个替代方案会稍微改变布局，因为它会减少图像右侧的空间。另一方面，您可能想要这样做，并使用边距或填充来调整空间，因为这提供了比使用空格字符进行间距更稳定的布局。