如何在Blazor应用的Menu菜单中实现图标右对齐？

问题原因 #

原有代码使用float: right实现图标右对齐不生效，核心原因是Blazor默认项目依赖的Bootstrap框架中，.nav-link类默认设置了display: flex弹性布局，flex容器的直接子元素上的float属性会被布局规则忽略，并非float语法写法错误。
原有问题代码参考：

<li class="nav-item px-3">
    <NavLink class="nav-link" @onclick="() => TogleSubmenu(NavSubmenu.Second)">               
        Upload <img src="../images/upicon.png"  style="float: right; height: 10px; width: 15px;">
    </NavLink>
</li>

实际运行效果：

推荐实现方案（无需自定义CSS，直接用Bootstrap内置工具类） #

方案1：两端对齐布局（最常用） #

给NavLink添加flex布局相关的工具类，删除img上的float: right样式即可，代码如下：

<li class="nav-item px-3">
    <NavLink class="nav-link d-flex w-100 justify-content-between align-items-center" @onclick="() => TogleSubmenu(NavSubmenu.Second)">               
        Upload 
        <img src="../images/upicon.png" style="height: 10px; width: 15px;">
    </NavLink>
</li>

用到的类作用说明：

• d-flex：将NavLink设置为弹性布局容器
• w-100：让NavLink撑满整行导航项的宽度，给右对齐留出足够空间
• justify-content-between：让容器内的文本、图标两个子元素分别靠左右两侧排布
• align-items-center：让文本和图标垂直方向居中对齐，避免上下错位

方案2：自动边距推到右侧 #

如果不想用两端对齐，也可以给图标设置左外边距自动，把图标直接推到最右侧：

<li class="nav-item px-3">
    <NavLink class="nav-link d-flex align-items-center" @onclick="() => TogleSubmenu(NavSubmenu.Second)">               
        Upload 
        <img src="../images/upicon.png" class="ms-auto" style="height: 10px; width: 15px;">
    </NavLink>
</li>

其中ms-auto是Bootstrap提供的工具类，等价于margin-left: auto，在flex布局下会自动占满元素左侧的剩余空间，把图标挤到容器最右侧。

注意：以上两种方案都必须删除img标签上原有的float: right内联样式，避免冗余样式引发布局异常。

内容的提问来源于stack exchange，提问作者D T