水平横向导航菜单需用<nav><ul><li>语义化结构，CSS通过display: inline-block或flex使<li>并排；须清除列表默认样式、处理空白缝隙，并添加hover与active交互效果。
用 HTML 列表标签（<ul><li>）制作水平横向导航菜单，核心是借助 CSS 控制 <li> 元素的显示方式，让它们并排而非默认的垂直堆叠。
基础 HTML 结构要规范
先写语义清晰、结构正确的列表：
- 用
<nav>包裹整个导航区域，提升可访问性和语义化 - 用无序列表
<ul>表示导航项集合 - 每个菜单项用
<li>包裹，内部放带href的<a>
示例：
<nav><ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
关键 CSS：让 li 横向排列
默认 <li> 是块级元素，垂直排列。只需一行 CSS 就能变横向：
立即学习“前端免费学习笔记（深入）”；
- 给
<li>设置display: inline-block—— 最常用、兼容性好、易控制间距 - 或用
display: flex在<ul>上 —— 更现代、布局能力强（如居中、等宽、自动撑满） - 避免用
float: left—— 已过时，需清除浮动，维护成本高
推荐写法（inline-block）：
nav ul {list-style: none;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 12px 20px;
text-decoration: none;
color: #333;
}
优化细节：去点、去空白、加交互
横向菜单容易出现小问题，几处关键处理：
-
清除默认列表符号和内外边距：
list-style: none; margin: 0; padding: 0;必加 -
解决 inline-block 的空白缝隙：HTML 中
<li>标签换行会产生空格，导致间隙。可选方案：
✓ 把<li>写在同一行
✓ 给<ul>设font-size: 0，再给<a>单独设字号
✓ 改用 Flex 布局（更彻底） -
鼠标悬停与当前页样式：用
a:hover和.active类增强体验，例如加下划线、背景色或文字变色
Flex 方案（简洁现代推荐）
如果支持 IE10+，直接对 <ul> 使用 Flex：
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin-right: 8px;
}
nav a {
display: block;
padding: 12px 20px;
text-decoration: none;
}
这样无需担心空白缝隙，还能轻松实现居中（justify-content: center）、等宽（flex: 1）或自适应（flex-wrap: wrap）。
