并排生成按钮不适用于 display: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

 <button style="float:left" class="btn btn-primary" role="button" style="display:inline-block">{{hit._source.keywords[0].keyword}}</button>

Answer 2

我看到你正在使用 bootstrap 所以你只需要将这些按钮封装在 btn-group :

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

Answer 3

它们垂直堆叠是因为您生成了一系列 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>

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

Generating buttons side by side not working with display:inline-block

html

css

styles

ngfor

angular