Генерация кнопок рядом не работает с дисплеем: 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

Я вижу, что вы используете загрузчик, поэтому вам просто нужно инкапсулировать эти кнопки внутри 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 2

Они сложены вертикально, потому что вы генерируете серию 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 3

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