最近,当我为博客设计一些样式时,我遇到了一个问题,我在JSX中呈现了一块锚标签,它们看起来不正确。
所有链接都有落后的空间,这些空间都被强调了!
我们是怎么来到这里的?
我有一系列标签,它们在<div>
中显示,就像这样:
<div>
{
tags.map((tag) => (
<a class="tag" href={`#`}>
#{tag}
</a>
))
}
</div>
我不完全理解为什么下划线的,尾随的空间被渲染,并在JavaScript的神嘲笑我时哭泣。
克服它后,我尝试更改word-wrap
和其他各种CSS样式来修复链接,但没有成功。我承认,我花了比我预期找到的解决方案更长的时间,我写了这个博客,以使我摆脱未来的自我,不可避免地会再次遇到这个问题。
我们如何克服?
事实证明,如果添加了display: inline-block
,它将删除空间中的下划线!
这是一个代码epen,可以显示此LIL CSS的技巧!
结束,保持安全,书呆子。