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

Question

I'm generating buttons using Angular and the buttons are one on top of the other rather than side by side

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

I've tried style="display:inline-block" as well as style="display:inline" and they both end up one above the other. Does it have to do with the way *ngFor works or is there some other CSS style i could use?

Answer 1

They are stacked vertically because you generate a series of div , which are block elements.

You should apply the ngFor loop to the button:

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

or apply the display style to the inner div :

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

Answer 2

I see that you are using bootstrap so you just need to encapsulate these buttons inside 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>