子元素默认左对齐是浏览器标准行为，并非错误；ul居中需用margin-inline:auto或margin:0 auto配合width，而非text-align:center；li内容左对齐须显式设置text-align:left；flex布局下text-align对li无效，需在li上设置；ul内不可嵌套div，必须严格遵循html语义结构。
子元素默认左对齐是正常行为，不是错误
HTML中块级元素（如 div、ul）居中后，其内部的文本、li、p 等子元素默认仍按 text-align: left 渲染——这是浏览器标准行为，不是样式失效或 bug。居中的是容器本身，不是它的内容流。
ul 列表居中但 li 保持左对齐的正确写法
常见翻车点：给 ul 加 margin: 0 auto 或 text-align: center 后，发现项目符号和文字也跟着居中了。问题出在误用了 text-align: center 作用于 ul ——它会把所有行内内容（包括 li 的文本）一并居中。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
-
ul用margin-inline: auto或margin: 0 auto居中（需配width或fit-content） -
ul不设text-align；真正控制文字对齐的是li或ul的text-align，但必须显式设为left - 加
list-style-position: inside防项目符号被padding截断
Flex 布局下子元素不自动继承父级 text-align
如果父容器用了 display: flex 居中，text-align 对子元素无效——因为 li 已变成 flex item，排版由 flex 主轴/交叉轴控制，不再走文本流。此时要让 li 内容左对齐，必须单独设置：
- 在
li上写text-align: left（推荐） - 或在
ul上设align-items: flex-start，但这只影响 cross axis（垂直方向），不影响文字对齐 - 避免在
ul上写text-align: center，它对 flex item 无意义
容易忽略的语义陷阱：ul 里不能直接放 div
很多人为“控制对齐”把 div 塞进 ul，比如：<ul><div><li>...</li></div></ul>。这违反 HTML 规范，会导致渲染不可预测——浏览器可能忽略 div、重排列表项、甚至让 li 失去项目符号。最终表现就是对齐错乱、样式失效。
正确结构只能是：<ul>
<li>...</li>
<li>...</li>
</ul>。所有对齐控制必须通过 CSS 作用于 ul 或 li，而不是靠非法嵌套强行“包裹”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
