使用Flexbox时，如何保留列表符号？

Flexbox与列表样式冲突

在HTML中，<li>元素默认带有列表符号，通过应用list-style属性可以更改符号类型。然而，有时在为<li>元素添加display: flex属性后，列表符号可能会消失。这是因为flexbox和list-style属性会产生冲突。

解决方案

为了在使用flexbox时显示列表符号，可以采用以下方法：

1. 使用list-style-type和list-style-position属性：

li {
  display: flex;
  list-style-type: disc;
  list-style-position: inside;
}

• list-style-type可以设置符号类型，例如disc（圆形）。
• list-style-position可以设置符号位置，例如inside（符号出现在文字内）。

2. 使用inline-flex属性：

inline-flex可以将flexbox项作为内联元素排列，从而允许同时使用flexbox和list-style属性。

li {
  display: inline-flex;
  list-style-type: circle;
}

通过使用这些方法，可以在应用flexbox布局的同时保留<li>元素的列表符号。