Blazor项目中RadzenStack内表单与按钮的Flexbox水平对齐问题

问题分析 #

你的代码存在两个核心问题导致对齐异常：

1. Style属性语法错误：所有元素的Style属性结尾使用了错误的转义引号"，导致CSS无法正确解析。
2. 冗余的Flex配置：RadzenStack设置Orientation="Horizontal"后已经自动成为flex容器，无需重复添加display: flex；同时子元素的高度和对齐配置混乱，导致垂直方向错位。

修正后的代码 #

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

    <RadzenFormField Text="" Style="display: flex; align-items: center; gap: 10px;">
        <RadzenDropDown Style="height: 40px;" />
    </RadzenFormField>

    <RadzenButton Text="Add Members" Click="buttonClick" Style="height: 40px;" />
</RadzenStack>

关键调整说明 #

• 修复语法错误：移除所有Style属性中错误的转义引号，确保CSS规则正常生效。
• 简化Flex容器配置：依赖RadzenStack的Orientation="Horizontal"实现水平布局，去掉重复的display: flex。
• 统一垂直对齐：通过RadzenStack的align-items-center类，确保所有子元素在垂直方向居中对齐，无需在每个子元素中重复设置。
• 统一元素高度：将height: 40px直接应用到RadzenDropDown和RadzenButton，保证核心交互元素的高度一致，避免容器高度不匹配导致的错位。

进阶优化（可选） #

如果需要下拉框自适应剩余宽度，可以给RadzenFormField添加flex: 1样式，让两个下拉框平分容器剩余空间：

<RadzenFormField Text="" Style="flex: 1; display: flex; align-items: center; gap: 10px;">
    <RadzenDropDown Style="height: 40px; width: 100%;" />
</RadzenFormField>

如果仍存在细微对齐偏差，可通过浏览器开发者工具检查元素的默认margin/padding，添加自定义CSS清除冗余间距：

.radzen-form-field {
    margin-bottom: 0;
}

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