CSS Listing 2 separate Lists per line with 2 elements and so on

Asked Sep 09 '20 at 09:35

Active Sep 09 '20 at 09:48

Viewed 23 times

I have two ngFors for each element (hero or villain)

<div class="listeHeroes">
    <a *ngFor="let hero of heroes" class="list-group-item list-group-item-action"
       routerLink="/herodetail/{{hero.id}}">
      {{hero.name}}

    </a>
</div>

<div class="listeVillains">

    <a *ngFor="let villain of villains"class="list-group-item list-group-item-action"
       routerLink="/villaindetail/{{villain.id}}">

        {{villain.name}}

    </a>
</div>

I already made the width to 50% so 2 elements fit into one line

.listeHeroes {
  width: 50%;
  text-align: left;
}

.listeVillains {
  width: 50%;
  text-align: right;
}

I wanted the heroes on the left and the villains on the right, but text-align doesn't move the whole element to the right, only the text. How do I make them as I described?

This is how it looks right now: https://imgur.com/a/xweqmh5

edited Sep 09 '20 at 09:46

m4n0

27,411
26
71
84

asked Sep 09 '20 at 09:35

Does this answer your question? [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) – Douwe de Haan Sep 09 '20 at 09:48
Okay i used inlineblock and it worked – Sep 09 '20 at 09:49
A demo of your code would be good enough to ease the solution. – m4n0 Sep 09 '20 at 09:49
when u use a divison, it starts in a new line by default. Use Inline-block to avoid it – Sandrin Joy Sep 09 '20 at 09:50

CSS Listing 2 separate Lists per line with 2 elements and so on

0 Answers0