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

【问题标题】：How to add spaces between different tags如何在不同标签之间添加空格
【发布时间】：2020-06-01 13:27:35
【问题描述】：

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

<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 之间有一些空间，但不知道该怎么做。

【问题讨论】：

使用在你想要空间的html中
或者更好地在 css 中进行样式设置并在 p 标签上引用该类

标签： html css vue.js tags

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用&nbsp; 在html 中插入一个空格。

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    nameA: "Job",
    nameB: "Bob"
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ nameA }}&nbsp;Vs&nbsp;{{ nameB }}
</div>

How to insert spaces/tabs in text using HTML/CSS

【讨论】：