并排生成按钮不适用于显示:内联块

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，它们是块元素。

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

Answer 2

我看到您正在使用引导程序，因此您只需将这些按钮封装在btn组中：

<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

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