HTML列表标签怎么制作水平横向排列的导航菜单列表-H5教程-PHP中文网

水平横向导航菜单需用语义化结构，css通过display: inline-block或flex使并排；须清除列表默认样式、处理空白缝隙，并添加hover与active交互效果。

html列表标签怎么制作水平横向排列的导航菜单列表

用 HTML 列表标签（<ul><li></ul>）制作水平横向导航菜单，核心是借助 CSS 控制 <li> 元素的显示方式，让它们并排而非默认的垂直堆叠。

基础 HTML 结构要规范

先写语义清晰、结构正确的列表：

用 <nav></nav> 包裹整个导航区域，提升可访问性和语义化
用无序列表 <ul></ul> 表示导航项集合
每个菜单项用 <li> 包裹，内部放带 href 的 @#@#@#@#@#@#@#@#@#@0

@#@#@#@#@#@#@#@#@#@1

@#@#@#@#@#@#@#@#@#@2

@#@#@#@#@#@#@#@#@#@3

关键 CSS：让 li 横向排列

默认 <li> 是块级元素，垂直排列。只需一行 CSS 就能变横向：

给 <li> 设置 display: inline-block —— 最常用、兼容性好、易控制间距
或用 display: flex 在 <ul></ul> 上 —— 更现代、布局能力强（如居中、等宽、自动撑满）
避免用 float: left —— 已过时，需清除浮动，维护成本高

推荐写法（inline-block）：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

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></ul> 设 font-size: 0，再给 <a></a> 单独设字号
✓ 改用 Flex 布局（更彻底）
鼠标悬停与当前页样式：用 a:hover 和 .active 类增强体验，例如加下划线、背景色或文字变色

Flex 方案（简洁现代推荐）

如果支持 IE10+，直接对 <ul></ul> 使用 Flex：

nav ul {
  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）。