如何在div中将CreateNew按钮对齐到Employees文本右侧最右端

要实现按钮与标题横向对齐且按钮居右，只需调整布局结构，利用Flex布局的对齐属性即可：

修改后的代码如下：

<div class="d-flex flex-column">
    <!-- 新增flex容器实现标题与按钮横向对齐 -->
    <div class="d-flex justify-content-between align-items-center mb-2">
        <MudText Typo="Typo.h1">Employees</MudText>
        <MudButton Variant="Variant.Outlined" Color="Color.Secondary">CreateNew</MudButton>
    </div>
    <MudPaper class="d-flex flex-column h-100" style="min-height: 0;">
        <MyForm/>
        <div class="d-flex h-100" style="min-height: 0;">
            <MudTable Items="Items" FixedHeader="true" Height="100%" Style="width: 100%; height: calc(100% - 52px);"
                      MultiSelection="true" SelectOnRowClick="false">
                <HeaderContent>
                    <MudTh>Length</MudTh>
                    <MudTh>Age</MudTh>
                </HeaderContent>
                <RowTemplate>                   
                    <MudTd DataLabel="StartIndex">2</MudTd>
                    <MudTd DataLabel="Length">2</MudTd>
                    <MudTd DataLabel="Edit">
                        <MudIconButton Icon="@Icons.Material.Filled.Edit" aria-label="edit" ></MudIconButton>
                        <MudIconButton Icon="@Icons.Material.Filled.Delete" aria-label="delete"></MudIconButton>
                    </MudTd>
                </RowTemplate>
            </MudTable>
        </div>
    </MudPaper>
</div>

关键修改点：

• 新增d-flex justify-content-between align-items-center容器包裹标题和按钮，justify-content-between让元素分别靠左右两端，align-items-center保证垂直居中对齐
• 移除原有的<MudItem>和按钮上的float:right样式，Flex布局可直接实现需求
• 将标题原有的mb-2移到外层容器，保持间距一致

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