text-align: left 仅作用于内联内容，不能使嵌套块级元素整体左对齐；块级子元素默认左贴边，其定位需用 flex、grid 或 margin 控制。
text-align: left 只作用于内联内容，不能让嵌套的块级元素整体左对齐——这是最常踩的坑。
为什么给父 div 加 text-align: left 没用？
因为 text-align 不控制块级子元素的位置，只影响其内部的文本、span、img、button（未设 display: block 时）等内联级内容的水平对齐。如果子元素是 div、section、article 这类块级元素，默认仍独占一行且左边缘紧贴父容器左边界（这是浏览器默认行为），但你加了 text-align: left 并不会“加强”这个效果，也不会让它们缩进或偏移。
常见错误现象：
- 给外层
div设置text-align: left，里面嵌了三个div.card，结果它们还是垂直堆叠 - 以为
text-align能“推”动整个子结构左移，其实它根本不管子元素的盒模型定位
真正起作用的左对齐方式：按目标层级选方案
统一左对齐 ≠ 一个属性打天下。得看你要对齐的是什么：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 若目标是让所有文字、图标、行内按钮左对齐 → 在最外层容器上设
text-align: left，子元素自动继承（除非被显式覆盖） - 若目标是让多个子
div横向并排且整体靠左 → 父容器用display: flex+justify-content: flex-start，或子元素设display: inline-block+vertical-align: top - 若目标是让某一块（如卡片组）脱离居中布局、紧贴页面左侧 → 给该块设
margin-right: auto（配合默认margin-left: 0），而不是依赖text-align - 若父容器本身是
flex或grid，子元素左对齐由父容器的justify-content或justify-items控制，子元素自身无需额外设置
vertical-align 和 inline-block 并排时容易错位
用 display: inline-block 实现多层嵌套元素横向排列时，vertical-align 默认是 baseline，会导致高度不一的元素底部不对齐，看起来像“左对齐失败”。
实操建议：
- 统一设
vertical-align: top（或middle），避免基线对齐干扰 - 清除 HTML 中换行/空格产生的空白符：把子元素标签写成
<div>...</div> <div>...</div>连写，或用注释<!-- -->消除间隙 - 不要在
inline-block元素上同时滥用float，它会脱离文档流，后续清理成本高
嵌套太深时，text-align 的继承可能被意外中断
哪怕你在外层写了 text-align: left，只要中间某一层显式设置了 text-align: center 或 text-align: right，就会覆盖继承值，导致下层文字突然右偏或居中。
排查方法：
- 用浏览器开发者工具检查目标文字所在元素的 computed 样式，看
text-align值从哪来 - 注意
input、textarea等表单控件有 UA 默认样式，可能自带text-align，需显式重置 - 表格单元格（
td、th）的text-align是独立继承的，不会受外层div影响，要单独设
多层嵌套下左对齐的关键，是分清「内容对齐」和「容器定位」——前者靠 text-align，后者靠 margin、flex 或 grid。混淆这两者，就等于拿螺丝刀拧螺母。
