Can't aling horizontally items in Angular

user_12252693 0
Viewed 87

I have 4 item in a div that are show vertically, but I want them align horizontally. I don't know what I'm missing but I'm unable to do it

This is the 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>

This is the .ts where I get the data

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

This are the scss styles

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

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

I noticed that the item width is taking the whole screen, but I don't know how to remove it enter image description here

nebular angular css
3 Answers

You can create a div that will wrapper both the div and nb-user

Something like:

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

And the style:

.wrapper {
  display: flex;
}

And then you can delete the display inline-block from other classes

user_136654380

I would use flexbox for this.

Try this:

.teachers-box {
  display: flex;
}

.teacher-box {
  width: 25%
}

and remove the .teacher-box style of display: inline-block;

user_73654610

Try adding float: left; to div? As in:

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