asp.net div中的文本正在拆分

我尝试了很多东西，这个问题花了我将近5个小时。但我解不出来
这是我有问题的页面。
Issue page

长文本字段4：和长文本字段6：错误。它们应该像字段1或2或3或5一样对齐。

当我尝试white-space：nowrap;
没修好，短信在按钮后面
After tried no wrap issue
我使用外部css（外部css像（forexample abc（div class=“abc”））为每个标签+按钮组合。
当我移除它的时候。好吧，就是这个意思。
Correct Design I want
但是由于一些原因，我必须把这个外部css添加到div中。我该怎么做才能修好它。请帮帮我

<style> 
.main {
    margin: 0;
}

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

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

</style>
 
 <div class="main  abc">  <!-- abc my external css I don't know what it is but I must add it-->
    <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>

如果此代码运行，输出将是我共享的第一个图像。
如果我加上.abc { white-space：nowrap;}到样式部分，输出将是图像2。
如果我去掉abc，这意味着输出将是，

我理解你的沮丧解决布局和对准问题有时是相当具有挑战性的。我来帮你吧。为了解决您所描述的问题，您应该确保div中的每个元素（标签、输入和按钮）与类“abc”正确对齐。以下是您可以执行的操作：

<div class="abc">
    <label for="campo1">Campo 1:</label>
    <input type="text" id="campo1" name="campo1">
    <button type="button">Pulsante 1</button>
</div>

<div class="abc">
    <label for="campo2">Campo 2:</label>
    <input type="text" id="campo2" name="campo2">
    <button type="button">Pulsante 2</button>
</div>

你的外部CSS可能看起来像这样：

.abc {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Add spacing between sections */
}

label {
    flex: 1;
    margin-right: 10px; /* Add space between the label and the input */
}

有了这个CSS，文本字段和按钮应该在每个.abc节中正确对齐。此外，我还添加了底部边距，以垂直分隔不同的部分。我希望这能启发你自己的解决方案。

asp.net div中的文本正在拆分

1条答案

相关问题

热门标签

最新问答