css - 矩形框中的文本

Question

我正在尝试在这样的矩形框中显示文本数组。

但我得到它就像文本显示为整行

下面是代码片段

<span *ngFor="let mfal of mfals" class="review-span mfal">
  {{mfal}}
</span>

.mfal {
  background-color: #7A7A7A;
  color: white;
}

感谢任何帮助

标签： cssangular

Answer 1

这是您可以执行的操作：

 <span *ngFor="let mfal of mfals" class="review-span mfal">
    {{mfal}}</span>

.mfal {
  display: inline-block;
  background-color: #7A7A7A;
  color: white;
  padding: 5px;
  margin: 0 5px;
}

确保您的元素具有 inline-block 或 inline 的显示，添加相应的 padding 和 margin。