当为 元素设置 display: flex 时，其默认的 display: list-item 行为被覆盖，导致原生项目符号（bullets）消失；本文提供两种可靠解决方案：手动插入符号或通过伪元素精准控制，兼顾语义性与布局灵活性。
当为 `
在现代 CSS 布局中，display: flex 是实现列表项内元素对齐与分布的常用手段。但一个常被忽略的关键点是：<li> 元素的项目符号（如圆点、数字等）依赖于其默认 display: list-item 计算行为，而一旦显式声明 display: flex，该行为即被完全取代——项目符号不会自动渲染，即使 list-style-type 仍有效。
✅ 推荐方案：使用 ::before 伪元素（语义清晰 + 可控性强）
这是最符合语义化和可维护性的做法。我们不干扰 <li> 的 flex 布局能力，而是将项目符号作为独立的视觉元素注入到目标容器前：
ul li {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none; /* 显式移除原生符号，避免干扰 */
}
/* 仅作用于内容区，避免被 justify-content 推开 */
.item-label::before {
content: "• ";
margin-right: 0.5em;
font-weight: bold;
color: #333;
}对应 HTML 结构需明确标注内容容器：
<ul>
<li>
<div class="item-label">Item 1</div>
<div class="actions">
<mat-icon>edit</mat-icon>
<mat-icon>delete</mat-icon>
</div>
</li>
</ul>⚠️ 注意事项：
- 切勿对
<li>直接使用::before并依赖justify-content: space-between—— 因为伪元素会成为 flex 子项，被强制分配空间，导致符号与文字分离甚至错位；.item-label应包裹纯文本内容，确保符号紧邻文字左侧；list-style: none是良好实践，显式关闭已被废弃的原生样式，避免潜在冲突。
⚠️ 替代方案：手动插入 Unicode 符号（快速但语义弱）
适用于原型开发或极简场景，直接在 HTML 中写入：
<li>
<div>• Item 1</div>
<div>
<mat-icon>edit</mat-icon>
<mat-icon>delete</mat-icon>
</div>
</li>此方式无需额外 CSS，但缺点明显：
- 破坏内容与样式的分离原则；
- 不利于国际化（如需切换为
→或✓）； - 无法通过 CSS 统一控制颜色/大小/间距。
✅ 总结
| 方案 | 语义性 | 可维护性 | 多语言支持 | 推荐指数 |
|---|---|---|---|---|
::before + 专用类 |
✅ 完整保留 <li> 语义 |
✅ CSS 集中管理 | ✅ 可动态替换 content
|
⭐⭐⭐⭐⭐ |
手动插入 •
|
❌ 内容混入表现层 | ❌ 散布于 HTML 各处 | ❌ 需全局替换 | ⭐⭐ |
最终建议始终采用伪元素方案，并配合 list-style: none 和语义化类名（如 .item-label），既尊重 HTML 列表结构，又获得完整的 Flex 布局能力与设计自由度。
