Html 并排生成按钮不使用显示：内联块

我使用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块和style=display:inline块，结果都是一个比另一个高。

---

它是否与*ngFor works的方式有关，或者我是否可以使用其他CSS样式？

我看到您正在使用引导，所以您只需要将这些按钮封装在btn组中：

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

---

它们是垂直堆叠的，因为生成了一系列div，这些div是块元素

应将ngFor循环应用于按钮：

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

---

添加一些解释，以便每个人都能理解解决方案！另外，您有两个样式属性不幸的是，所做的只是将按钮向左移动，但它们仍然在彼此的顶部。如果您将css ine float:left添加到您希望在css或样式中并排放置的对象，则下一个对象将进入其右浮动：right和right。抱歉，这里的缺点是：如果重复的样式属性是错误的，请给出答案？啊，好的。是的，最初我是这样硬编码的，但现在我正在尝试动态生成它们。有没有一种方法可以通过引导实现这一点？如果不是，我可能不需要为这个部分使用引导。是的，只要将这个类d-inline-block添加到您的按钮，这将使您的按钮显示在同一行

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

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