ul默认垂直排列因浏览器设padding-left和display:list-item；横向导航需CSS干预，推荐flex布局重置样式，兼顾兼容性与可访问性。
ul 和 li 本身是垂直排列的，要横向导航栏，必须用 CSS 覆盖默认样式 —— 不改 display 或 float，光写 HTML 永远不会横过来。
为什么默认是竖着的？
浏览器对 ul 默认设了 padding-left，对 li 默认设了 display: list-item，本质就是为垂直列表设计的。不显式干预，它就不可能自动横排。
-
ul的padding-left: 40px（各浏览器略有差异）会让整个导航左偏，得清掉 -
li默认不是行内元素，margin和line-height对齐效果有限，靠它撑开横向间距不可靠 - 别用
float: left了，容易触发 BFC、父容器塌陷，现代项目优先用display: flex
推荐写法：flex 布局 + 重置基础样式
这是目前最稳定、语义清晰、响应友好、且兼容到 IE11 的方案（IE10+ 支持 flex，加前缀即可）。
<nav>
<ul class="nav-list">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>对应 CSS：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
.nav-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.nav-list li {
margin-right: 20px; /* 横向间距 */
}
.nav-list a {
text-decoration: none;
color: #333;
}- 必须设
list-style: none，否则小圆点/数字还在 -
margin-right加在li上比加在a上更可控（避免点击区域被截断） - 如果最后一项不需要右间距，可用
:not(:last-child)限定：.nav-list li:not(:last-child) { margin-right: 20px; }
遇到 hover 下划线不居中？检查 line-height 和 padding
很多人为 a 加 border-bottom 实现下划线效果，但线常偏上或偏下 —— 这是因为 line-height 和 padding 共同影响了文字基线位置。
- 给
a设固定height+line-height等于该值，能强制垂直居中（如height: 48px; line-height: 48px;） - 若用
padding控制高度，下划线位置由padding-bottom决定，而非border-bottom自身 - hover 时加
border-bottom: 2px solid #007bff前，先确认a没有vertical-align或display: inline-block引发的基线偏移
移动端要折叠？别硬塞 JavaScript 切换 class
用 @media 配合 flex-direction: column 更轻量，也利于 SEO 和可访问性。
@media (max-width: 768px) {
.nav-list {
flex-direction: column;
}
.nav-list li {
margin-right: 0;
margin-bottom: 8px;
}
}- 别等 JS 加载完才显示菜单，CSS 媒体查询是即时生效的
- 如果真要汉堡菜单，用
input[type="checkbox"] + label + ul的纯 CSS 方案，避免 JS 失效导致导航不可见 - 记得给移动端
nav加role="navigation"，屏幕阅读器才认得这是导航区
横向导航真正麻烦的从来不是“怎么让它横”，而是“横了之后点击热区是否合理”“焦点顺序是否符合 Tab 键流”“缩放 200% 后文字会不会溢出”。这些细节没对齐，再漂亮的 flex 也只是半成品。
