Как я могу скрыть изображение в jquery и сделать так, чтобы ярлык оставался на том же месте?

Question

Я создаю игру. У моего персонажа 5 жизней. Когда моего персонажа убивают, я хочу спрятать 1 жизнь из 5. Когда я делаю это с jQuery, метка «Lives:» перемещается немного вправо (чтобы заполнить пространство, ранее занимаемое жизнью, я только что спрятался.

Пример:

  <div class="items">
    <p class="welcomemsg" id="or">welcome</p>
    <p  style="font-family:Bubble; color:white; font-size:28px; margin-right: 5%;" >Lives:
    <img class="lives" src="./assets/img/logopac.png" alt="pacslogo" id="live1">
    <img class="lives" src="./assets/img/logopac.png" alt="pacslogo" id="live2">
    <img class="lives" src="./assets/img/logopac.png" alt="pacslogo" id="live3">
    <img class="lives" src="./assets/img/logopac.png" alt="pacslogo" id="live4">
  </p>
</div>

  if (board[shape.i][shape.j] == 14) {
    if(livesCounter!=0) {
        $("#live"+livesCounter).hide();
        livesCounter--;
    }
  }

    .items{
        display: flex;
        justify-content: space-between;
        }

    .welcomemsg{
        font-family: 'Bubble';
        font-size: 32px;
        color:white;
        margin-left:5%;
    }

Как сделать так, чтобы мой ярлык оставался на месте?

Answer 1

Попробуйте это:

.lives {
    display: inline-block;
    with: 80 px;
}

<span class="lives">
<img class="live" src="./assets/img/logopac.png" alt="pacslogo" id="live1">
<img class="live" src="./assets/img/logopac.png" alt="pacslogo" id="live1">
<img class="live" src="./assets/img/logopac.png" alt="pacslogo" id="live1">
<img class="live" src="./assets/img/logopac.png" alt="pacslogo" id="live1">
<img class="live" src="./assets/img/logopac.png" alt="pacslogo" id="live1">
</span>