本身只是语义化无序列表，需加 css 才能实现导航功能：必须设 list-style: none、li 用 inline-block 或 flex 横排、a 设 display: block 扩展点击区域，并推荐 flex 布局配合 flex-wrap 和 aria 属性提升可用性。
ul 导航栏为什么不能直接用，得加 CSS 才能像导航？
因为 <ul></ul> 本身只是语义化的无序列表，浏览器默认会渲染成带圆点、缩进、垂直堆叠的样式——这和横向排列、无装饰、可点击的导航栏完全不匹配。不加 CSS 的 <ul></ul> 做导航，用户根本点不了，还可能被屏幕阅读器误读为普通列表内容。
关键不是“能不能用”，而是“必须配合哪些最小 CSS 才算可用”：
- 必须设
list-style: none去掉圆点 - 必须把
<li>改成display: inline-block或display: flex实现横排 - 每个
<a></a>需要设display: block才能让整个区域可点击（否则只有文字部分响应） - 建议加
text-decoration: none去掉下划线，不然像普通链接
用 flex 布局写 ul 导航最稳，但要注意父容器宽度和换行
display: flex 是目前最可靠的方式，比 inline-block 少一堆空白符问题，也比 float 不用清浮动。但它有个隐藏陷阱：当导航项太多或容器太窄时，flex-wrap: nowrap（默认值）会让内容溢出或横向滚动，而不是自动换行。
实操建议：
- 给
<ul></ul>加display: flex和flex-wrap: wrap（需要响应式时） - 给
<li>设margin-right: 1rem，但最后一项用:last-child { margin-right: 0 }避免多余空隙 - 如果导航固定在顶部，
<ul></ul>外层最好包一层<nav></nav>，提升语义和可访问性 - 别忘了加
align-items: center让文字垂直居中（尤其搭配图标或不同字号时）
点击区域小、hover 不生效？大概率是 a 标签没撑满 li
常见现象：鼠标移上去没变化，或者只能点到文字，旁边空白区域点不动。根源几乎全是 <a></a> 默认是 inline 元素，不占满 <li> 的宽高。
解决方式只有一条路：
- 给
a加display: block（或inline-block），再配padding: 0.5rem 1rem扩展热区 - 不要只靠
line-height撑高，它对点击区域无效 - 如果用了
flex布局，也可以让a也设display: flex+align-items: center，更精准控制垂直对齐 - 检查是否被其他 CSS（比如父级
overflow: hidden）意外裁剪了 padding 区域
移动端折叠菜单用 ul 完全没问题，但 JavaScript 控制的是 class 不是 ul 本身
很多人以为“移动端导航要重写 HTML”，其实不用。<ul></ul> 结构完全可以复用，JS 只需切换一个 class，比如 is-open，然后用 CSS 控制显示/隐藏和布局方向。
典型配合方式：
- CSS 中写
.nav-menu { flex-direction: column; max-height: 0; overflow: hidden; }和.nav-menu.is-open { max-height: 500px; } - JS 里只操作
document.querySelector('.nav-menu').classList.toggle('is-open') - 千万别用
display: none切换，会导致过渡动画失效；用max-height或transform: scaleY()更稳妥 - 记得加
aria-expanded属性同步更新，方便辅助技术识别状态
a 加 display: block，或者 flex 容器忘了设 align-items 导致文字悬空。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
