RadzenStack 内部的对齐问题

Question

我正在使用 Radzen 组件开发 Blazor 项目，并且正在努力使用 Flexbox 在同一行内水平对齐表单和按钮。该表单包含下拉菜单，我希望按钮位于下拉菜单旁边，但对齐方式似乎已关闭。

这是我的代码：

<RadzenStack Orientation="Orientation.Horizontal" Class="align-items-center" Style="display: flex; gap: 20px; align-items:center;">
    <RadzenFormField Text="" Style="height: 40px; display: flex; align-items: center; gap: 10px;">
        <ChildContent>
            <RadzenDropDown />
        </ChildContent>
    </RadzenFormField>

        <RadzenFormField Text="" Style="height: 40px; display: flex; align-items: center; gap: 10px;">
            <ChildContent>
                <RadzenDropDown  />
            </ChildContent>
        </RadzenFormField>
    <RadzenButton Text="Add Members" Click="buttonClick" Style="height: 40px; display: flex; align-items: center;" />
</RadzenStack>

如何确保在此布局中使用 Flexbox 使

RadzenFormField

和

RadzenButton

在同一行内正确对齐？

Answer 1

您应用了

<RadzenFormField>

和

<ChildContent>

来（包装）两个

<RadzenDropDown>

，但没有应用

<RadzenButton>

。渲染的 HTML：

<div class="rz-form-field-content">
  <!-- Radzen Dropdown Content but not our focus -->
</div>

来自

.rz-form-field-content

CSS：

.rz-form-field-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    margin-block: var(--rz-form-field-margin-block);
    margin-inline: var(--rz-form-field-margin-inline);
    box-shadow: var(--rz-form-field-shadow);
    transition: var(--rz-input-transition);
}

使用

margin-block

，这将为（下拉）容器添加额外的顶部边距（8px）。因此，这不会与您的

<RadzenButton>

对齐，因为它没有此样式规则。

---

可以实现两种方法：

方法 1：将

margin-block: var(--rz-form-field-margin-block)

规则添加到

<RazdenButton>

。

<RadzenButton Text="Add Members" Click="buttonClick" Style="height: 40px; display: flex; align-items: center; margin-block: var(--rz-form-field-margin-block)" />

方法2：将

<RazdenButton>

包裹成

<RazdenFormField

和

<ChildContent>

，并自定义样式。

渲染时需要自定义样式去除边框并聚焦。

<style>
    .rz-form-field.no-border .rz-form-field-content {
        border: 0; 
        box-shadow: none;
    }
</style>

<RadzenFormField Class="no-border" Text="" Style="height: 40px; display: flex; align-items: center; gap: 10px;">
    <ChildContent>
        <RadzenButton Text="Add Members" Style="height: 40px; display: flex; align-items: center;" />
    </ChildContent>
</RadzenFormField>