如何让 Flexbox 布局的列表项同时显示列表符号?

如何让 flexbox 布局的列表项同时显示列表符号?

flex 属性对列表样式的影响

  • 元素添加 display: flex 属性时,会覆盖默认的列表样式。这可能是因为 flexbox 布局是一种全新的布局方式,它具有自己的样式优先级。

    解决方案

    要同时显示 flexbox 布局和列表符号,可以使用以下方法:

    • list-style-position: 将其设为 inside 可将符号放在列表项内部。
    li {
      display: flex;
      list-style-position: inside;
    }
    li::marker {
      display: block;
      content: "●";
      margin-right: 10px;
    }
    
    li {
      display: flex;
    }

    此外,确保 flexbox 容器没有设置 list-style-type: none;,因为这将完全禁用列表样式。

  • 以上就是如何让 Flexbox 布局的列表项同时显示列表符号?的详细内容,更多请关注其它相关文章!