Blazor .NET 7中如何让EditForm内外的两个按钮同行对齐？

EditForm默认是块级元素，会独占一行，这就是导致两个按钮分行的原因。以下几种方法可以解决这个问题：

方法1：使用Bootstrap网格布局（推荐） #

借助Bootstrap的.row和.col-auto类，将EditForm和外部按钮放入同一行的列中：

<div class="row">
    <div class="col-auto">
        <EditForm>
            <button type="submit" class="btn btn-primary" style="width:140px">
                Create
            </button>
        </EditForm>
    </div>
    <div class="col-auto m-2">
        <button class="btn btn-primary" style="width:140px"><i aria-hidden="true"></i> Clear</button>
    </div>
</div>

.row创建弹性布局容器，.col-auto让列宽度自适应内容，确保两个元素在同一行排列。

方法2：设置EditForm为行内块元素 #

直接修改EditForm的display属性，使其不再独占一行：

<EditForm style="display: inline-block;">
    <button type="submit" class="btn btn-primary" style="width:140px">
        Create
    </button>
</EditForm>

<button class="btn btn-primary m-2" style="width:140px"><i aria-hidden="true"></i> Clear</button>

方法3：使用Flex容器包裹 #

用div创建flex容器，强制内部元素横向排列：

<div style="display: flex; align-items: center; gap: 16px;">
    <EditForm>
        <button type="submit" class="btn btn-primary" style="width:140px">
            Create
        </button>
    </EditForm>

    <button class="btn btn-primary" style="width:140px"><i aria-hidden="true"></i> Clear</button>
</div>

display: flex启用弹性布局，align-items: center保证按钮垂直居中，gap用于控制两个按钮的间距。

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