Установка HTML-элементов на ноль или пробел вызывает смещение поля

Question

Использование Bootstrap 4 и jQuery для обновления моих абзацев HTML.

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

Вот кодовая ручка .Я специально установил второе поле на "".3-е и 4-е поля на экране смещены (перемещены вверх), поскольку 2-е поле "".

Чтобы устранить смещение, я теперь устанавливаю UnitPrice на "&*nbsp;" (* добавлено для отображения)

Это устраняет проблему смещения, но я все же хотел бы знать причинудля смещения в первую очередь и почему я не могу назначить UnitPrice на "" или " "?

Answer 1

Согласно вашей текущей структуре HTML, такое поведение ожидается.Это происходит потому, что ваши options-field-title и options-ajax-field являются двумя разными контейнерами и, по какой-либо причине, если какое-либо из значений поля пустое, оно ничего не вызывает, вызывая такое поведение.(Поскольку Pack Unit пусто, Price/Qty начинается сразу после окончания Quantity).

Чтобы решить эту проблему, вы можете изменить структуру HTML, чтобы убедиться, что заголовок и значения находятся в 1 строке.

Нечто подобное, как показано ниже

<div style="display: flex;justify-content: space-between;">
   <p>Quantity</p>
   <p id="product-qty"></p>
</div>

ИЛИ задайте им фиксированную высоту, чтобы даже если значение не было, оно не выглядело иначе

Высота приближения

.options-field-title > p, .options-ajax-field > p {
   height: 20px;
}