Jquery 将html元素设置为null或空白会导致字段移位

使用Bootstrap4和jQuery更新我的HTML段落

$("#product-unit-price").html(UnitPrice);

。我特意将第二个字段设置为

“

。屏幕上的第三和第四个字段被替换（上移），因为第二个字段是

“

”

为了解决置换问题，我现在将单价设置为

“&*nbsp；”

（

*

添加用于显示目的）

---

这消除了置换问题，但我仍然想知道置换的原因，以及为什么我不能将

单价

分配给

“

或

”

？

根据您当前的HTML结构，这种行为是预期的。这是因为

options字段标题

和

options ajax字段

是两个不同的容器，如果任何字段值为空，那么它不会呈现导致此行为的任何内容。（由于

包装单元

为空，

价格/数量

在

数量

结束后立即开始）

要解决此问题，您可以重新构造HTML，以确保标题和值在一行中

类似于下面的东西

数量

或者给它们一个固定的高度，这样即使没有值，它看起来也不会有什么不同

高度接近

.options field title>p、.options ajax field>p{
高度：20px；
}

我很难理解问题所在。你能详细说明一下吗，也许可以用问题的图像和期望的结果？此外，您还需要在问题中发布，而不是在第三方网站上发布。当html元素没有内容时，它的大小将收缩为0。可能最简单的修复方法是重新构造html。实际上，基本上有一列用于标签，一列用于值。取而代之的是，有一列同时包含这两个元素。有4个div。然后在每个div中放置标签和值。标签上总是有内容。所以emply值不会改变其他值的位置。他很难接受，因为他有一个块元素（p），当他在其中放置空格时，它会垂直塌陷，他不明白为什么。@Kruddock没有深入探讨为什么块元素为空时会塌陷，以及块元素如何修剪空白，我建议您查看有关如何构建表单和使用该表单的引导文档。谢谢你的评论。因此，除非我明确地给这些段落一个高度，或者一个最小高度，否则如果内容是空的，它们将崩溃。