How to set lists in one row in Angular

Question

I have a list of items, I want to make them be inline, have tried css but I dnt think am cracking it, they end up being set in the number of lines I have the items in the list,

This is my css

 .list-list-item  li{
      position: relative;
      display: block;
      padding: .75rem 1.25rem;
      margin-bottom: -1px;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, .125)
    }

    .list-list {
      display: -ms-flexbox;
      display: inline-block !important;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-left: 0;
      margin-bottom: 0
    }

This is my html

<ul class="list-list ">
                      <li class="list-list-item"
                          style="font-size: 2em;font-weight: bold; color: white;text-align: left;">
                        {{reports.response_rate | number : '1.2-2'}} % Rate
                      </li>
                      <li class="list-list-item"  style="vertical-align:bottom; text-align:left; font-size: 2em;font-weight: bold;color:white"
                          [ngStyle]="{'color' : (reports.response_rate_7day_change > 0) ?  'green': 'red'}">
                        {{reports.response_rate_7day_change | number : '1.4-4'}}
                      </li>
                      <li class="list-list-item" style="font-size: 2em;font-weight: bold; color: white;text-align: left;"
                          [ngStyle]="{'background-image' : (reports.response_rate_7day_change > 0) ? getIncrease():  getDecrease() }"
                          style="background-repeat: no-repeat">
                      </li>
                    </ul>

this is what I end up with, how can I have them in one line?

here is a css-trick solution. check it out

Barış Can Yılmaz
– Barış Can Yılmaz

2021-07-05 21:12:48 +00:00
Commented Jul 5, 2021 at 21:12 — Barış Can Yılmaz
– Barış Can Yılmaz, Commented Jul 5, 2021 at 21:12

user776686 · Accepted Answer · 2021-07-05 21:13:10Z

1

You have several problems in your css code.

Wrong selector: .list-list-item li doesn't select anything. li already is .list-list-item
A bit of mess on the .list-list selector - you target different types of display values, plus flex-direction: column; does nothing on display: inline-block
At any rate, setting flex-direction: column; will not help in having the children displayed inline :) row will.

I have removed anything that is irrelevant to the problem:

html

<ul class="list-list ">
  <li class="list-list-item">
    20% Rate
  </li>
  <li class="list-list-item">
    abc
  </li>
  <li class="list-list-item">
    abc
  </li>
</ul>

css

.list-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
}

.list-list-item {
  list-style: none;
}

answered Jul 5, 2021 at 21:13

user776686

8,79817 gold badges80 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set lists in one row in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related