无序列表文字排版问题源于CSS未覆盖浏览器默认样式；需用word-break、line-height、padding-left与list-style-position协同控制换行、对齐及符号间距。
无序列表的文字排版，核心不在 <ul> 或 <li> 标签本身，而在于 CSS 对 li 内容的控制——浏览器默认只加圆点、不干预文字换行、对齐或间距。
为什么 <li> 里的文字会挤在一起或换行错位？
常见现象：长文本没换行、多行文字首行缩进不一致、项目符号和文字贴太近。这不是 HTML 结构错了，而是默认样式没覆盖到位。
-
li默认是块级元素，但内部文字按普通段落渲染，不自动断行（尤其含长英文/URL 时） - 浏览器给
ul设了padding-left（通常 40px），但这个缩进和项目符号位置是分离的，list-style-position: outside是默认值，意味着符号在 padding 区外，文字从 padding 起始——若手动重置了padding却忘了调list-style-position，就会错位 - 如果给
ul或li设了display: flex或inline-block，list-style会失效（符号消失），文字变成“裸排”
list-style-type 和 list-style-position 怎么配着用？
改符号类型只是第一步；真正影响文字视觉对齐的是 list-style-position 的取值。
-
list-style-position: outside（默认）：项目符号在li盒子外侧，文字从padding-left开始；适合常规排版，但若清除了padding，文字会顶到左边，符号悬空 -
list-style-position: inside：符号纳入li内容流，文字从符号后紧接，换行时第二行会与第一行文字左对齐——但注意：这会让多行文本的第二行缩进异常（因符号占位），生产环境慎用 - 稳妥做法：保留
outside，显式设置padding-left控制整体缩进，再用margin-left微调符号与文字间距（通过li::before）
怎么让长文本在 <li> 里正常换行并保持对齐？
关键不是改列表标签，而是给 li 加文字排版规则。
立即学习“前端免费学习笔记（深入）”；
- 强制断行：
li { word-break: break-word; }（中英文混排推荐）或word-wrap: break-word; - 避免首行缩进干扰：
li { text-indent: 0; }（某些全局 CSS 会污染li） - 统一行高与间距：
li { line-height: 1.6; margin-bottom: 0.5em; }，比依赖ul的margin更可控 - 若内容含链接或强调文本，确保
a、strong等继承line-height，否则多行时基线错乱
嵌套列表的文字缩进为什么突然变大？
不是 list-style 叠加导致的，而是父级 ul 的 padding-left 被子级继承或未重置。
- 浏览器默认给每层
ul都加约 40pxpadding-left，两层嵌套就变成 80px，文字看起来“被推远了” - 解决方案不是删
padding，而是用层级选择器重设：ul ul { padding-left: 20px; }或更彻底地统一用margin-left控制缩进 - 若用 CSS Reset（如 normalize.css），它可能已清掉
ul的padding，此时必须手动补上，否则符号和文字全贴左边界
最容易被忽略的一点：文字排版效果是否一致，取决于你有没有在 li 上显式声明 box-sizing、line-height 和 vertical-align。哪怕只改一个 font-size，若没同步调整 line-height，多行列表项的垂直节奏就会松散或挤压。
