list-style-type 无效是因 display 改变导致浏览器隐式重置；需显式设置 list-style，flex 下 ul 设 display: flex 更稳妥，注意 vertical-align、flex-wrap 和 IE11 兼容性问题。
list-style-type 无效？先确认 display 类型是否支持
用 display: inline-block 或 flex 改变列表项排列方向时，list-style-type 可能突然消失——这不是 bug，是浏览器渲染逻辑：当 li 脱离默认块级流（比如设为 inline-block），部分浏览器会隐式重置 list-style 相关属性。
- 解决方法：显式写上
list-style: disc inside;或你想要的样式，不要只依赖默认值 -
flex布局下更稳妥：给ul设display: flex，li默认保持list-style（除非你主动设了list-style: none） - 注意
inline-block的换行符空格问题：HTML 中li标签间的换行/缩进会被渲染成空格，导致横向间隙；要么删空格，要么用font-size: 0抑制，再给li单独设字体大小
flex 实现横向列表时，justify-content 和 flex-wrap 怎么选
横向列表不是“只要加 display: flex 就完事”，关键在容器行为控制。
-
justify-content: flex-start（默认）适合左对齐、不撑满父容器的场景；需要等宽分布就用space-between或space-around - 内容超宽时，默认
flex-wrap: nowrap会让项目溢出或缩小——真要换行得手动加flex-wrap: wrap，但那就不是“横向列表”而是“多行横向组”了 - 移动端慎用
flex: 1给每个li：可能强制拉伸破坏文字可读性；优先用min-width+flex-grow: 0
inline-block 横向列表的垂直对齐问题
vertical-align 是 inline-block 最容易被忽略的坑。所有 li 默认按基线（baseline）对齐，一旦里面内容高度不同（比如有图标、行高不一致），就会出现错位。
- 统一设
vertical-align: top或middle，别依赖默认值 - 如果
li内含img，记得给img加vertical-align: middle，否则图片底部默认留空白 - 避免混用
inline-block和纯文本节点——文本节点的 baseline 行为难预测，建议全部包在span或div里
兼容性差异：IE11 对 flex 和 inline-block 的处理
老项目还要兼容 IE11？那得知道它对两者的实际支持边界：
立即学习“前端免费学习笔记（深入）”；
-
inline-block在 IE8+ 完全可用，是安全选择；但 IE11 下vertical-align对input或textarea子元素支持不稳定 -
flex在 IE11 需要加-ms-前缀：display: -ms-flexbox，且不支持gap、flex-wrap: wrap-reverse等新特性 - IE11 的
flex: 1会错误计算剩余空间，建议拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;
横向列表看着简单，但 display 切换后，list-style、vertical-align、flex 换行、IE 兼容这四点，漏掉一个就卡半天。
