如何利用Flexbox将按钮放置在InputSelect组件右侧？

问题原因 #

你当前的代码把按钮直接放在form-floating容器内，而form-floating的默认样式会让内部元素以块级形式排列，同时它的结构要求必须是「选择框/输入框在前，标签在后」，插入按钮会破坏原有布局逻辑，导致按钮跑到选择框上方。

解决方案一：绝对定位按钮（推荐） #

通过外层相对定位容器，将按钮绝对定位到选择框右侧并垂直居中，同时给选择框留出右侧内边距避免内容被按钮遮挡：

<div class="form-group row mb-3">
    <div class="col-auto">
        <!-- 相对定位容器，作为按钮的定位基准 -->
        <div class="position-relative">
            <div class="form-floating">
                <InputSelect id="Organisation" class="form-select pe-5" @bind-Value="Meeting.OrganisationId">
                    <option value="0">Select Organisation:</option>
                    @foreach (var org in Organisations)
                    {
                        <option value="@org.Id">@org.Name</option>
                    }
                </InputSelect>
                <label for="Organisation">Organisation</label>
            </div>
            <!-- 绝对定位按钮，垂直居中+靠右 -->
            <button type="button" class="btn btn-primary position-absolute end-0 top-50 translate-middle-y">
                <span class="oi oi-plus"></span>
            </button>
        </div>
        <ValidationMessage For="@(() => Meeting.OrganisationId)" />
    </div>
</div>

关键样式说明 #

• position-relative：给外层容器添加，让内部绝对定位的按钮以它为基准
• pe-5：给选择框添加右侧内边距，避免选项文本被按钮遮挡
• position-absolute end-0 top-50 translate-middle-y：让按钮靠右对齐，同时垂直居中

解决方案二：使用Input Group组件 #

利用Bootstrap的input-group组件实现选择框与按钮的横向排列，同时兼容form-floating的浮动标签：

<div class="form-group row mb-3">
    <div class="col-auto">
        <div class="form-floating">
            <div class="input-group">
                <InputSelect id="Organisation" class="form-select" @bind-Value="Meeting.OrganisationId">
                    <option value="0">Select Organisation:</option>
                    @foreach (var org in Organisations)
                    {
                        <option value="@org.Id">@org.Name</option>
                    }
                </InputSelect>
                <button class="btn btn-primary" type="button">
                    <span class="oi oi-plus"></span>
                </button>
                <label for="Organisation">Organisation</label>
            </div>
        </div>
        <ValidationMessage For="@(() => Meeting.OrganisationId)" />
    </div>
</div>

注意事项 #

这种方式依赖Bootstrap 5的组件兼容性，若使用旧版本可能需要微调样式确保标签位置正确。

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