如何在 jquery 中隐藏图像并使 label 保持在同一位置？

Question

I am building a game. My character has 5 lives. When my character gets killed I want to hide 1 life of 5. When I do that with jQuery the label of "Lives:" moves a little bit right (to fill the space formerly occupied by tne life I just hid.

Example:

  <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%;
    }

How can I make my label stay in place?

Answer 1

Try this:

 .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>