同一行中的多个对象

Question

我创建了一个只有名称和对应的 img 的技能组件。然后我想将 Skill.name 传递给子组件。我试图在同一行获得 3 个这些技能，但是当我使用 ngFor 时，它会将每个技能放在它自己的行上。

app.component.html

<div style="text-align:center">
  <h1 class="ui block header">
    Welcome to {{title}} WebApp!
  </h1>
</div>
<app-skills *ngFor="let listOfSkills of skillList" [skill]="listOfSkills"></app-skills>

skills.component.html

<div class="col-md-4">
  <h1>{{skill.name}}</h1>   
  <img src="assets/img/{{skill.name}}.jpg" alt="{{skill.name}} Badge" height="200" width="200">
  <button class="btn btn-success" (click)="showHide = !showHide">Show {{skill.name}} Stages</button>
  <app-stages *ngIf="showHide" [skill]="[skill.name]"></app-stages>
</div>

Answer 1

也许display:inline 会帮助你？