html - 并排生成按钮不适用于显示器 :inline-block

Question

我正在使用 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 样式？

Answer 1

它们是垂直堆叠的，因为你生成了一系列 div，它们是 block 元素。

您应该将 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>