健康一贴灵，专注医药行业管理信息化

使用 `<ul>` 和 `<li>` 创建**横向菜单**的完整 HTML + CSS 示例

当然可以！下面是一个使用 <ul> 和 <li> 创建横向菜单的完整 HTML + CSS 示例，并附有详细的 CSS 注释，帮助你理解每一行代码的作用。

✅ HTML + CSS 横向菜单示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>横向菜单示例</title>
  <style>
    /* 重置默认样式，避免浏览器默认的 margin/padding 干扰布局 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 让 width/height 包含 padding 和 border */
    }

    /* 定义菜单容器 */
    .menu {
      background-color: #333; /* 菜单背景色（深灰色） */
      padding: 0;             /* 移除 ul 默认内边距 */
      margin: 0;              /* 移除 ul 默认外边距 */
      list-style: none;       /* 移除列表项前的圆点（bullet） */
      display: flex;          /* 使用 Flexbox 实现横向排列（现代、简洁） */
      justify-content: center; /* 水平居中菜单项（可选） */
    }

    /* 菜单项 li 的样式 */
    .menu li {
      /* 无需设置 display: inline-block，因为父容器用了 flex */
    }

    /* 菜单项中的链接 */
    .menu a {
      display: block;              /* 让 <a> 标签占据整个 li 空间，方便点击 */
      padding: 15px 20px;         /* 内边距：上下 15px，左右 20px（增加点击区域） */
      color: white;               /* 文字颜色为白色 */
      text-decoration: none;      /* 去掉下划线 */
      font-family: Arial, sans-serif;
      font-size: 16px;
      transition: background-color 0.3s ease; /* 背景色平滑过渡 */
    }

    /* 鼠标悬停时的样式 */
    .menu a:hover {
      background-color: #555;     /* 悬停时背景变亮一点 */
      color: #ffcc00;             /* 悬停时文字变为黄色（可自定义） */
    }

    /* 可选：给第一个或最后一个菜单项添加特殊样式（比如圆角） */
    .menu li:first-child a {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    .menu li:last-child a {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  </style>
</head>
<body>

  <!-- 横向导航菜单 -->
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

</body>
</html>

📝 补充说明：

  • 为什么用 display: flex？
    这是现代 Web 开发中最推荐的方式，简洁、响应式友好，比传统的 float 或 display: inline-block 更可靠。

  • 替代方案（兼容老浏览器）：
    如果你需要支持非常老的浏览器（如 IE8），可以用：

    .menu li {
  display: inline-block;
}

    并去掉 display: flex。但现代项目一般无需考虑。

  • 响应式扩展建议：
    在小屏幕上，你可以用媒体查询将菜单变为垂直或汉堡菜单（但本例聚焦横向）。

如有需要，我也可以提供 响应式版本 或 带下拉子菜单的横向导航栏！

posted @ 2025-12-23 09:15  一贴灵  阅读(3)  评论(0)    收藏  举报
学以致用，效率第一