代码之家 › 专栏 › 技术社区 › Dasonic

自动换行停止

ngfor angular

0

Dasonic · 技术社区 · 7 年前

这是我现在的密码

<div class="groups">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
       <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

如何使按钮显示在同一行中?

3 回复 | 直到 7 年前

1

3

Abel Valdez 7 年前

通过使用bootstrap,这是将它放在一条直线上的方法。

<div class="groups row">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
     <div class="col-1">  
        <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

或者使用简单的CSS

<div class="groups">
    <h3>Groups:</h3>
    <div *ngFor="let group of groups; let i = index" class="group">
     <div style="display:inline-block;">  
        <button (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

2

4

ConnorsFan 7 年前

这个 ngFor 回路已打开 div 元素。因为这些是块元素,所以最终会得到一个垂直的 部门 容器,每一个都有一个按钮。

ngFor公司 回路上的 button

<div class="groups">
    <h3>Groups:</h3>
    <div class="group">
       <button *ngFor="let group of groups; let i = index" (click)="changeGroup(i)">{{group}}{{i}}</button>
    </div>
</div>

3

2

Chellappan à®µ 7 年前

Angular ng容器是一个分组元素,它不干扰样式或布局,因为Angular不会将其放入多姆

<ng-container *ngFor="let group of groups; let i = index" class="group">
   <button (click)="changeGroup(i)">{{group}}{{i}}</button>
</ng-container>