Html Question posted in
Some basic documentation can be found here.

Html – How to Make Bullet Points Appear When Using display: flex?

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?

Tags:

2

Answers


  1. 0 
    <div>• Item 1</div>

    You can manually add a bullet point as shown above.

    ul li::before{
    content: "•";
}

    Using before will treat the bullet point as a seperate item and space it out because of the justify-content:space-between;

    Therefore, we can make add a class called itemLabel to prevent this and then use the following css:

    ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.itemLabel::before {
  content: "• ";
}
    <ul>
  <li>
    <div class="itemLabel">Item 1</div>
    <div>
      <mat-icon>edit</mat-icon>
      <mat-icon>delete</mat-icon>
    </div>
  </li>
</ul>

    Note: the reason display:flex; is causing the bullet points to not display is because the display:list-item; (which is default for all li) is overruled (this property causes the bullet point to be displayed)

    Login or Signup to reply.
  2. 0

    @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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search