提问人：Surabaya 提问时间：9/16/2023 最后编辑：Surabaya 更新时间：9/16/2023 访问量：68
div 中的文本正在拆分
Text inside div is splitting
问：
我尝试了很多事情，这个问题花了我差不多 5 个小时。但我无法解决它。
这是我的页面，有问题。
长文本字段 4： 和长文本字段 6： 是错误的。它们应该像字段 1 或 2 或 3 或 5 一样对齐。
当我尝试 white-space：nowrap;
它不是固定的。文字在按钮后面。
我正在为每个标签+按钮组合使用外部css（外部css，如（例如abc（div class=“abc”）））。
当我删除它时。这是okey，它的意思是这个。
我想要的正确设计
但是由于某些原因，我必须将这个外部 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 这意味着输出将是我想要的
答：
0赞
Dave
9/16/2023
#1
我理解你的挫败感;解决布局和对齐问题有时可能非常具有挑战性。让我试着帮助你。 为了解决你所描述的问题，你应该确保div中每个元素（label、input和button）与类“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 部分中正确对齐。此外，我还添加了底部边距以垂直分隔不同的部分。我希望这能激发您自己的解决方案。
评论
0赞
Surabaya
9/16/2023
我正在尝试戴夫，耶稣必须把你送到我这里来。一分钟我在尝试我的朋友
0赞
Surabaya
9/16/2023
它不是固定的。结果如下 字段 1： 字段 2： 字段 3： ....和按钮1 按钮2 ...（文本下方的按钮）
0赞
Surabaya
9/16/2023
字段 1： 字段 2： 字段 3： 字段 4： 字段 5： 字段 6： 按钮 1： 按钮 2： 按钮 3： 按钮 4： 按钮 5： 按钮 6：
0赞
Dave
9/17/2023
让我们试试这个方法： Html： <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> </格>
0赞
Dave
9/17/2023
CSS： .abc { display： flex; align-items： center; margin-bottom： 10px; /* 添加各部分之间的间距 / } label， input， button { margin-right： 10px; / 在元素之间添加空格 / } / 可选：在标签和输入之间创建空格 / label { flex-basis： 100px; / 根据需要调整宽度 */ }
评论