How to set lists in one row in Angular - html

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?

Answer 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;
}