text-align: left仅对容器内内联内容生效，不影响块级元素自身定位；让div整体左对齐应使用margin-right: auto或flex布局。
text-align: left 只影响内联内容，不移动块级元素本身
给一个 div 直接加 text-align: left 却发现它没“靠左”，大概率是误解了这个属性的作用对象。它只控制该容器内部的文本、span、img（默认行内）等内联级内容的**行内对齐位置**，对 div 自身在父容器里的左右定位毫无影响。
常见错误现象：
- 空
div加了text-align: left，什么也没显示——因为里面没内联内容可对齐 -
button或input看似被右对齐了，其实是它们作为替换元素默认表现接近内联；一旦加了display: block，text-align就立即失效
实操建议：
- 目标是让文字、图标、行内按钮左对齐 → 直接在父容器上设
text-align: left - 想让整个
div脱离居中、贴着父容器左边 → 别用text-align，换margin-right: auto或flex - 该样式会继承，子元素若没显式覆盖，就自动按父级的
text-align对齐
让块级元素自身左/右对齐，优先用 margin 或 flex
真正想把一个 div、section 或自定义组件整体“推到左边”或“钉在右边”，得操作它自身的外边距或所处的布局上下文。
实操建议：
- 最轻量且兼容性好的方式：给该元素设
margin-right: auto（左对齐）或margin-left: auto（右对齐），前提是它有明确宽度且是块级流内元素 - 现代布局首选：把该元素放进一个
display: flex的父容器，再用justify-content: flex-start（左）或justify-content: flex-end（右）统一控制 - 避免用
float: left/right—— 它会让元素脱离文档流，容易引发高度塌陷，且响应式切换时难维护
导航栏左右分区必须靠父容器 flex，不是子元素自己 flex
写两个 div，分别加 display: flex，它们依然垂直堆叠——这是最常卡住人的点。Flexbox 的布局能力只作用于**直接子元素**，控制权永远在父容器手上。
正确结构是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<nav class="nav-container"><div class="nav-left"></div> <div class="nav-right"></div> </nav>
然后只在 .nav-container 上设：
.nav-container {
display: flex;
justify-content: space-between;
}
这样左区自动锚定左边界，右区自动锚定右边界，中间留空。别在子元素上再加 margin-left: auto，会干扰 space-between 的计算逻辑。
图片左右对齐不能依赖 text-align，要按上下文选方案
text-align: right 写在图片的父容器上，常常没反应——因为图片虽是行内元素，但它的对齐还受 vertical-align、换行、父容器宽度等干扰，结果不可控。
实操建议：
- 单图右对齐（不绕文）→ 设
display: block+margin-left: auto - 图文混排（文字绕图）→ 用
float: right，但务必紧跟一个clear: both防塌陷 - 和其它 UI 元素并排（如 logo + 按钮）→ 父容器
display: flex+justify-content: flex-end
真正容易被忽略的是：所有这些方案都依赖父容器的宽度是否明确、是否处于正常文档流。一旦嵌套了 position: absolute 或多层 display: inline-block，对齐行为就会悄然偏移，调试时得一层层确认 display 类型和父容器的布局模式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
