首页 > 文章 > 前端

CSS水平导航菜单制作教程

时间：2025-10-23 17:48:31 383浏览收藏

想要轻松实现网页水平导航菜单？本教程为你详细讲解如何使用CSS控制列表项的显示方式，让你的导航菜单横向排列！我们重点介绍两种简单有效的实现方法：**display: inline** 和 **flex 布局**。其中，**flex布局**因其更强的灵活性和响应式处理能力而被强烈推荐。文章将通过实例代码，一步步教你如何运用`display: flex`属性，以及如何使用`justify-content`控制对齐方式，打造美观实用的水平导航菜单。此外，我们还提供悬停效果和媒体查询等额外建议，助你提升用户体验，让你的网站导航更上一层楼！快速掌握CSS水平导航菜单技巧，就从这里开始！

使用display: inline或flex布局可实现导航菜单水平排列，推荐flex布局。1. 将nav ul设为display: flex，li自动水平排列；2. 通过justify-content控制对齐方式；3. 添加hover效果和媒体查询提升体验。

如何用css制作导航菜单水平排列

让导航菜单水平排列，核心是控制列表项的显示方式。最常用的方法是使用 display: inline 或 flex 布局。下面介绍两种简单有效的实现方式。

方法一：使用 display: inline

将每个菜单项（

）设置为内联元素，使它们在同一行显示。

HTML 结构：

CSS 样式：

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
}

nav a {
  text-decoration: none;
  padding: 10px 15px;
  color: #333;
}