含外部CSS类abc的表单标签与按钮对齐问题求助

我已经花了近5小时解决表单布局问题，至今没成功。当前页面里Long text field 4和Long text field 6布局错位，需要和Field1、2、3、5保持一致。尝试添加white-space:nowrap;后文本被按钮遮挡；移除外部CSS类abc能恢复正常布局，但因需求必须保留这个类，求解决方案。

相关页面状态说明 #

• 问题页面：右侧Long text field 4、6布局错位，与左侧字段的标签-按钮对齐方式不一致
• 添加white-space:nowrap;后的页面：长文本不换行，但被右侧按钮遮挡
• 期望的正确布局：所有字段的标签与按钮对齐整齐，长文本正常换行且不被按钮遮挡

现有代码 #

<style> 
.main {
    margin: 0;
}

.left  {
    float:left;
    width:50%;
}

.right {
    float:left;
    widith: 50%
}

</style>
 
 <div class="main  abc">  <!-- abc是必须保留的外部CSS类，具体样式未知-->
    <div class="left">
        <FormElement>
            <MyRow>
                <FormRow>
                    <ExampleLabel>
                        <Label Text="Field1" ID="Field1">
                    </ExampleLabel>
                    <ExampleButton>
                        <MyButton Text="Button1" ID="Button1"/>
                    </ExampleButton>
                </FormRow>
            </MyRow>
        </FormElement>
        <FormElement>
            <MyRow>
                <FormRow>
                    <ExampleLabel>
                        <Label Text="Field2" ID="Field2">
                    </ExampleLabel>
                    <ExampleButton>
                        <MyButton Text="Button2" ID="Button2"/>
                    </ExampleButton>
                </FormRow>
            </MyRow>
        </FormElement>  
        <FormElement>
            <MyRow>
                <FormRow>
                    <ExampleLabel>
                        <Label Text="Field3" ID="Field3">
                    </ExampleLabel>
                    <ExampleButton>
                        <MyButton Text="Button3" ID="Button3"/>
                    </ExampleButton>
                </FormRow>
            </MyRow>
        </FormElement>              
    </div>
    
    
    <div class="right">
        <FormElement>
            <MyRow>
                <FormRow>
                    <ExampleLabel>
                        <Label Text="Long Text Field4" ID="Field1">
                    </ExampleLabel>
                    <ExampleButton>
                        <MyButton Text="Button4" ID="Button4"/>
                    </ExampleButton>
                </FormRow>
            </MyRow>
        </FormElement>
        <FormElement>
            <MyRow>
                <FormRow>
                    <ExampleLabel>
                        <Label Text="Field5" ID="Field5">
                    </ExampleLabel>
                    <ExampleButton>
                        <MyButton Text="Button5" ID="Button5"/>
                    </ExampleButton>
                </FormRow>
            </MyRow>
        </FormElement>  
        <FormElement>
            <MyRow>
                <FormRow>
                    <ExampleLabel>
                        <Label Text="Long Text Field6" ID="Field6">
                    </ExampleLabel>
                    <ExampleButton>
                        <MyButton Text="Button6" ID="Button6"/>
                    </ExampleButton>
                </FormRow>
            </MyRow>
        </FormElement>              
    </div>
</div>

注：运行上述代码呈现问题页面效果；添加.abc { white-space:nowrap; }呈现文本被遮挡的效果；移除abc类呈现期望的正确布局。

解决方案 #

1. 修复CSS拼写错误：.right类中的widith是拼写错误，改为width: 50%;，否则右侧容器宽度异常会影响布局。

2. 覆盖abc类的异常样式：给标签和行容器添加样式，确保长文本正常换行且标签与按钮对齐：

/* 覆盖abc类可能带来的nowrap强制不换行 */
.abc .ExampleLabel {
    white-space: normal;
    flex: 1; /* 让标签占据行内可用空间 */
    min-width: 120px; /* 根据实际需求调整，保证标签有足够宽度 */
    margin-right: 10px; /* 与按钮保持间距 */
}

/* 使用flex布局让标签和按钮横向对齐 */
.abc .FormRow {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

3. 清除浮动防止布局塌陷：给.main添加清除浮动的样式，避免左右容器溢出：

.main::after {
    content: "";
    display: table;
    clear: both;
}

通过以上调整，既能保留abc类，又能让所有字段标签和按钮对齐整齐，长文本正常显示不被遮挡。

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