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

Question

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

\n

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

\n

打印出以下内容：NameVSName\n我试图使其在 Name 和 VS 之间有一些空格，但不知道如何做到这一点。

\n

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>