同一行中的多个对象

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可以帮到你？