Having an unordered list to be in a single line-CodePudding

I'm having issues with styling my unordered list. What I'm trying to achieve is to have an ordered list to be next to each other like a star rating system, however, the last <li></li> unordered list is lower than the rest. I have tried position: relative and display: left but no progress. I'm using angular 13 to display the stars as an unordered list. Suggestions?

Component

export class SomeComponent implements OnInit {
    rating: number;
    stars: number[] = [1, 2, 3, 4, 5];
    selectedValue: number;  

    onRatingsChanged(value) {
        this.selectedValue = value;
    }

HTML

<div>
    <ul  *ngFor="let star of stars">
        <li (click)="onRatingsChanged(star)" [ngClass]="{'selected': (star <= selectedValue)}">
        <i ></i></li> 
   </ul>
</div>

CSS

            div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .rating-list li {
                float: left;
                color: #ddd;
                display: flex;
                /* transition: 0.5s;
                justify-content: center;
                align-items: center; */
                padding: 10px 5px;
            }

            .rating-list li:hover,
            .rating-list li:hover ~ li, .rating-list li.selected {
                color: #ffd700 !important;
            }

            .rating-list {
                display: inline-block;
                list-style: none;
                position: relative;
            }

            ul {
                margin-left: 1em;
                margin-top: 1em
            }

CodePudding user response：

add this to your style

ul li{
  display: inline;
}

CodePudding user response：

Remove all the styling and try this first. If it's what you need, add the rest, colors, font size, etc.

ul, li {
  padding: 0;
  margin: 0;
  
}

ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 1rem;
}