CODEWITHSUNDEEP
htmlcssangular
arriff
arriff

Reputation: 439

How to set lists in one row in Angular

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? enter image description here

Upvotes: 0

Views: 1005

Answers (1)

user776686
user776686

Reputation: 8685

You have several problems in your css code.

  1. Wrong selector: .list-list-item li doesn't select anything. li already is .list-list-item
  2. 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
  3. 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;
}

Upvotes: 1

Related Questions