无法水平排列 Angular 中的项目

Question

我在 div 中有 4 个垂直显示的项目，但我希望它们水平对齐。我不知道我错过了什么，但我做不到

这是HTML

<div class="teachers-box" *ngFor="let user of usuarios">
    <nb-user
      class="teacher-box"
      size="large"
      name="{{ user.name }}"
      color="#cccac8"
      onlyPicture
    >
    </nb-user>
  </div>

这是我获取数据的 .ts

usuarios = [
    { name: 'Gabriel A' },
    { name: 'Maximiliano B' },
    { name: 'Chavez C' },
    { name: 'Juan Pablo' },
  ]

这是scss样式

.teachers-box {
  display: inline-block;
}

.teacher-box {
  display: inline-block;
}

我注意到项目宽度占满了整个屏幕，但我不知道如何删除它

Answer 1

我会为此使用 flexbox。

试试这个：

.teachers-box {
  display: flex;
}

.teacher-box {
  width: 25%
}

并删除 display: inline-block;

的 .teacher-box 样式

Answer 2

您可以创建一个 div 来包装 div 和 nb-user

类似于：

  <div class="wrapper">
    <div class="teachers-box" *ngFor="let user of usuarios">
        <nb-user
          class="teacher-box"
          size="large"
          name="{{ user.name }}"
          color="#cccac8"
          onlyPicture
        >
        </nb-user>
    </div>
 </div>

风格：

.wrapper {
  display: flex;
}

然后可以从其他类

中删除显示inline-block

Answer 3

尝试将 float: left; 添加到 div？如：

.teachers-box {
  display: inline-block;
  float: left;
}

无法水平排列 Angular 中的项目

Can't aling horizontally items in Angular

css

angular

nebular