使用display:flex时如何让列表项目符号正常显示？

当你给<li>设置display: flex后，默认的列表项目符号会消失，这是因为flex容器的渲染模型会隐藏原生的列表标记。下面是几种实用的修复方案：

方案一：将flex布局移到li的子容器 #

保持<li>的默认渲染模式，把flex属性应用到内部的包裹容器上，原生项目符号就能正常显示：

/* 给内部包裹容器设置flex */
li .flex-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<ul>
  <li>
    <div class="flex-content">
      <div>Item 1</div>
      <div>
        <mat-icon>edit</mat-icon>
        <mat-icon>delete</mat-icon>
      </div>
    </div>
  </li>
</ul>

方案二：用伪元素模拟项目符号 #

如果必须让<li>作为flex容器，可以通过::before伪元素手动添加项目符号，还能自定义样式：

ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* 隐藏原生符号 */
  position: relative;
  padding-left: 1.5em; /* 给伪元素预留位置 */
}

ul li::before {
  content: "•"; /* 用圆点模拟默认符号，可替换为其他字符 */
  position: absolute;
  left: 0;
  font-size: 1.2em;
  color: inherit; /* 继承文字颜色 */
}

方案三：调整list-style-position属性 #

通过设置list-style-position: inside让项目符号和内容处于同一行，再微调布局避免拥挤：

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

/* 给第一个子元素加左边距，拉开和符号的距离 */
ul li > div:first-child {
  margin-left: 0.5em;
}

内容的提问来源于stack exchange，提问作者coder