Html 水平显示为标记的元素的角度

我目前有一个允许用户添加搜索过滤器的。例如，如果我添加线性代数、概率和数据科学，视图将显示每个过滤器的垂直列表和锚定标记：

<div *ngFor="let term of searchTerms"> 
  <div style="display: inline-block;"> {{term}} </div>
  <a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>
</div> 

我希望水平显示这些元素，我已经研究过了，但它与angular版本4.4.5不兼容

我已经尝试过将每个术语作为列表元素，并将其包装在一个菜单div中，然后修改CSS，但这也不起作用

第二，我想通过一些外观更干净的芯片来显示术语。我已经研究了一些，但这些对我来说似乎太重了。有没有提供简单标签的简单引导或CSS实现

---

谢谢大家!

在引导中，最接近芯片的东西是一个徽章-

---

如果您想要更时尚，您也可以使用按钮。

在搜索引导文档并使用用户建议后，我提出了以下解决方案：

<div class='container'>
    <div class="row">
          <div class="list-inline">
             <div *ngFor="let term of searchTerms" class="col-md-2" style="padding: 7px;">
                <div class="list-inline-item">
                    <span class="badge badge-pill"> {{term}} <a (click)="removeTerm(term)">✖</a>  </span> 
             </div>
          </div>
    </div>
   </div>
</div>

---

谢谢分享，有没有可能让这些元素水平显示？是否使用引导？使用引导版本3

<div class='container'>
    <div class="row">
          <div class="list-inline">
             <div *ngFor="let term of searchTerms" class="col-md-2" style="padding: 7px;">
                <div class="list-inline-item">
                    <span class="badge badge-pill"> {{term}} <a (click)="removeTerm(term)">✖</a>  </span> 
             </div>
          </div>
    </div>
   </div>
</div>