So I have a list something like this:
.ul-employee {
display: flex;
flex-direction: column;
text-align: left;
height: 100%;
justify-content: space-around;
}
.li-employee {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 400px;
}
<ul class="ul-employee">
<li class="li-employee">
<h3>Employee Name</h3>
<p>Salary</p>
<p>Position</p>
</li>
<li *ngFor="let employee of employees" class="li-employee">
<h3>{{ employee.name }}</h3>
<p>${{ employee.salary }} / hour</p>
<p>{{ positions[employee.position] }}</p>
</li>
</ul>
The result is this
The list is in a container with width of 400px, the list takes 100% of the width space and so does the list items. I tried doing text-align: left; but that doesn't seem to work.
How do I make it so it's aligned more like:
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
Employee Name Salary Position
instead of one more to the right and another more to the left?