Blazor HTML呈现问题

我不确定如何最好地解释这一点，因为我是一名刚刚开始从事web的桌面应用程序开发人员。Blazor似乎正在将.razor文件中的回车转换为html呈现中的元素。我注意到这一点已经有一段时间了，但这些因素似乎并没有影响任何事情。我遇到了一个情况，他们正在影响我的布局。如果你看我的截图，你会发现在我制作的这个页面控件中，下一个和最后一个按钮之间有一个空格。我的另一个屏幕截图显示了渲染的html元素，您会看到一个<！-->在那些按钮之间。而且这些元素似乎到处都是。通过一些测试，我意识到这是.razor文件中html代码中的回车。正如您所见，我将第一个和上一个按钮放在一行代码上，但下一个和最后一个按钮放在两行代码上

93
@对于（int i=1；i@i
}
4
:

由于您似乎正在使用引导，请尝试使用

按钮组作为按钮的包装。我以前见过类似的问题

我在我的一个应用程序中包含了一个按钮组中的按钮图像


如果您想了解更多详细信息，请返回给我，我将为您指出存储库中的一些代码。
谢谢Shaun。我的按钮确实解决了布局问题，现在看起来也更干净了。它仍然有那些垃圾html元素（<！-->）尽管如此。我很好奇是否有人知道它们来自何处以及它们是否有任何用途。注释出现在HTML中，因为内部JS算法使用它们将Blazor表示的组件结构映射到页面中的组件结构。需要注释以避免引入人为元素来界定组件的开始和结束组件。有关详细信息，请参阅。@MarkGrecco进一步了解Shaun Curtis的回答，您之所以只看到最后两个按钮之间的空格，是因为这两个按钮之间只有回车符（至少在您提供的示例中是这样）。浏览器将呈现此内容。感谢您的评论和链接。这很好地解释了这一点
<div class="my-2">
<button disabled="@(CurrentPage==1)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="First_Click">&#57;</button><button disabled="@(CurrentPage==1)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Prev_Click">&#51;</button>

@for (int i = 1; i <= TotalPages; i++)
{
    int x = i;
    <button disabled="@(CurrentPage==i)" class="btn btn-sm @(CurrentPage==i ? "btn-primary" : "btn-outline-primary") py-0 px-1" style="font-size: small; font-family: Courier;" @onclick="()=>Page_Click(x)">@i</button>
}

<button disabled="@(CurrentPage==TotalPages)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Next_Click">&#52;</button>
<button disabled="@(CurrentPage==TotalPages)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Last_Click">&#58;</button>