Blazor顶部导航栏布局调整：Logo居左、头像图标居右实现方案

现有代码与问题 #

当前Blazor项目中顶部导航栏的HTML结构：

<div>
    <main>
        <div class="top-row px-4">
            
            <RadzenImage Path="/SSE_Logo_RGB.png" Style="width: 9rem;"></RadzenImage>
            <RadzenIcon Icon="account_circle" IconColor="white"></RadzenIcon>
            
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

对应的CSS样式：

.top-row {
    background-color: #a2b2c8;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-start;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

需要实现Logo居左、头像图标居右的布局效果，以下提供两种可行方案：

方案一：利用margin-left: auto实现头像靠右（推荐，适配性更强） #

这种方式无需修改容器的justify-content，仅给头像元素添加自动左外边距，即可将其推至容器最右侧，适合后续可能在导航栏中间添加其他元素的场景。

修改步骤：

1. 直接在HTML中给RadzenIcon添加样式：

<RadzenIcon Icon="account_circle" IconColor="white" Style="margin-left: auto;"></RadzenIcon>

或者采用更规范的类方式：

• 先在CSS中新增类样式：

.top-row .profile-icon {
    margin-left: auto;
}

• 再修改HTML元素：

<RadzenIcon Icon="account_circle" IconColor="white" Class="profile-icon"></RadzenIcon>

方案二：修改容器的justify-content为space-between #

适合仅包含Logo和头像两个元素的场景，通过容器的flex布局属性直接分配两端空间。

修改步骤：

调整.top-row的CSS样式，将justify-content: flex-start替换为justify-content: space-between：

.top-row {
    background-color: #a2b2c8;
    border-bottom: 1px solid #d6d5d5;
    justify-content: space-between; /* 修改此处 */
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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