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-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

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

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

3 个答案: