html - 并排生成按钮不适用于display:inline-block

我正在使用Angular生成按钮，这些按钮是一个在另一个之上，而不是并排

<div *ngIf="response">
   <div *ngFor="let hit of response.hits.hits">
      <button class="btn btn-primary" role="button" style="display:inline-block">{{hit._source.keywords[0].keyword}}</button>
   </div>
</div>

我试过style="display:inline-block"以及style="display:inline"，它们都以另一个高于另一个。
它是否与*ngFor的工作方式有关，或者我可以使用其他CSS样式吗？

最佳答案

它们是垂直堆叠的，因为您会生成一系列div块元素。

您应该将ngFor循环应用于按钮：

<div *ngIf="response">
  <button *ngFor="let hit of response.hits.hits" ... style="display: inline-block">...</button>
</div>

或将display样式应用于内部div：

<div *ngIf="response">
   <div *ngFor="let hit of response.hits.hits" style="display: inline-block">
      <button...>...</button>
   </div>
</div>

关于html - 并排生成按钮不适用于display:inline-block，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52876541/