有没有办法删除位于单独一行上</a>之前的多余空白？

问题描述

在此示例中，是否可以避免链接末尾的多余空间，并且仍将</a>保持在代码中<a ...>的正下方？

<p>
    <a href="#">
        Peter Griffin
    </a>,cartoon character.
</p>

这个简单的例子当然可以写成：

<p>
    <a href="#">Peter Griffin</a>,cartoon character.
</p>

...并且仍然很可读。但是，如您在下一个示例中看到的那样，代码可能更加复杂，其中包含许多相互交织的服务器端逻辑（在我的例子中为剃须刀）。那么对我而言，很重要的一点是，结束标记必须始终位于开始标记的正下方，并在单独的一行上。

一个更复杂的示例：

<a asp-controller="Users" asp-action="Details" asp-route-id="@Model.ProjectOwner.Id">
    @Html.displayFor(model => model.ProjectOwner.FullName)
</a>,<span class="text-muted small">
    <span class="fas @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.Icon fa-fw"></span>
    @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.displayName
</span>

要在此处删除多余的空间，我必须将闭合锚标记移到第二行的结尾，如下所示：

<a asp-controller="Users" asp-action="Details" asp-route-id="@Model.ProjectOwner.Id">
    @Html.displayFor(model => model.ProjectOwner.FullName)</a>,<span class="text-muted small">
    <span class="fas @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.Icon fa-fw"></span>
    @Model.ProjectOwner.UserRoles.FirstOrDefault().Role.displayName
</span>

那看起来不太好...

解决方法

我找到了一个非常简单的CSS解决方案：

a {
    display: inline-block;
}

链接末尾不再有多余的空间！