I'm having an issue with bullet points not appearing in a list when I use display: flex on the parent element. Here's a simplified example of my code:
ul li {
display: flex;
justify-content: space-between;
align-items: center;
}
<ul>
<li>
<div>Item 1</div>
<div>
<mat-icon>edit</mat-icon>
<mat-icon>delete</mat-icon>
</div>
</li>
</ul>
In this setup, the bullet points for each list item are not displayed. How can I fix this so that the bullet points appear as expected?
@userNameAsString is correct, display: list-item
is overwritten by display: flex
. Fortunately <li>
content can be anything (see flow content), so just wrap an element around each of the <li>
s' content and make those the flexbox (ie the element with display: flex
).
.item {
display: flex;
justify-content: space-between;
align-items: center;
}
<ul>
<li>
<div class="item">
<div>Item 1</div>
<div>
<mat-icon>edit</mat-icon>
<mat-icon>delete</mat-icon>
</div>
</div>
</li>
<li>
<div class="item">
<div>Item 2</div>
<div>
<mat-icon>edit</mat-icon>
<mat-icon>delete</mat-icon>
</div>
</div>
</li>
<li>
<div class="item">
<div>Item 3</div>
<div>
<mat-icon>edit</mat-icon>
<mat-icon>delete</mat-icon>
</div>
</div>
</li>
</ul>