html - 如何在不同标签之间添加空格

Question

我有一些看起来像这样的代码

<div class="topnav">
  <div>{{getGameView.Game.gameplayers[0].player.username}}</div>
  <p>VS</p>
  <div v-if="getGameView.Game.gameplayers.length > 1">
　  {{getGameView.Game.gameplayers[1].player.username}}
　</div>
  <div v-else>Waiting for opponent...</div>
</div>

打印此内容:NameVSName
我试图做到这一点，以便在 Name 和 VS 之间有一些空间，但无法弄清楚如何去做。

Answer 1

一个解决方案是给 VS元素一个类，如 .vs并添加一些 padding给它:

p {
  margin: 0;
}

.topnav {
  display: flex;
}

.topnav .vs {
  padding-right: 10px;
  padding-left: 10px;
}

<div class="topnav">
  <div>Name</div>
  <p class="vs">VS</p>
  <div>Name</div>
</div>