最稳写法是用包裹并设display: flex；语义结构确保可访问性，justify-content应选space-around更均衡，移动端需处理flex-wrap和IE11兼容性。
直接用 <nav></nav> 包裹 <ul></ul>，再用 display: flex 布局，是当前最稳、语义最清、维护成本最低的写法。别再用 float: left 或 inline-block 硬凑了——它们在响应式场景下极易出错，且无法真正解决对齐、垂直居中、间隙控制等核心问题。
为什么不能给两个 div 各自设 display: flex
常见错误是把标题和菜单分别放进 <div class="titnav"> 和 <code><div class="mainnav">，然后各自加 <code>display: flex。这根本没用：
<div class="titnav"> 和 <code><div class="mainnav"> 是兄弟元素，默认块级堆叠，flex 只管自己内部子项，不管兄弟间位置 <li>即使两者都 flex，它们仍上下排列，不会自动同行</li> <li>想让“左标题 + 右菜单”对齐，必须让它们同属一个 flex 容器</li> <h3>正确的 HTML 结构必须含 <code><nav></nav>和<ul></ul>语义不是可选项，是功能基础。搜索引擎、读屏器、键盘 Tab 顺序都依赖它：
- 必须用
<nav></nav>包裹整个导航区，不能用<div class="nav"> <li>导航项必须是 <code><ul><li><a>…</a></li></ul>结构，不是<div><a>…</a></div> - 每个
<a></a>必须有href（哪怕暂时是#），否则无法聚焦、无法被键盘访问 - 当前页高亮靠 JS 动态加
class="active"，不能手写死在 HTML 里 -
space-between把首尾两项顶到容器边缘，中间空隙均分——如果左侧文字短、右侧文字长，视觉上会显得右偏 -
space-around给每项两侧留等量间隙，整体更均衡，适合“首页 | 关于 | 服务 | 联系我们”这类长度参差的菜单 - 别在
<nav></nav>上写white-space: nowrap：小屏会强制横向滚动，破坏体验；该用flex-wrap: wrap+ 媒体查询自然折行 - 移动端宽度不足时，
gap在 IE11 不支持，得退回到margin-right并手动处理最后一个<li>
justify-content: space-between的实际表现差异这个值看似简单，但文字长度不均时容易露馅：
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是可访问性细节：搜索框、登录按钮不该塞进同一个
<nav></nav>；多个<nav></nav>必须配aria-label区分用途；Safari 下a:hover要先定义a:link和a:visited才能生效背景色变化。- 必须用
