本文介绍如何使用纯 css 实现一个宽度自适应、水平居中显示的水平导航栏，避免默认 100% 宽度拉伸，同时保持简洁结构与良好交互效果。

本文介绍如何使用纯 css 实现一个宽度自适应、水平居中显示的水平导航栏，避免默认 100% 宽度拉伸，同时保持简洁结构与良好交互效果。

要实现一个水平居中、不撑满整行、背景仅包裹菜单项的导航栏，关键在于打破

默认块级元素的全宽行为，并利用 CSS 的布局机制（如 display: table）让容器“收缩包裹”其内容，再配合 margin: auto 实现居中。

原始代码中 #nav { width: 100%; float: left; } 强制导航栏占据整行宽度，且浮动导致父容器塌陷，难以居中。优化方案的核心改动如下：

✅ 移除固定宽度与浮动依赖：将 width: 100% 改为 width: auto，并添加 display: table —— 这使


Agent Browser
一款AI工具，主要用于一款基于 Rust 的快速无头浏览器自动化命令行工具（CLI），支持 Node.js 回退机制，可使 AI agent 通过结构化命令实现页面导航、点击、输入及截图，适合需要提升相关任务效率的用户。
下载
表现为一个“表格显示盒”，自动收缩至内部
• 的总宽度（即内容宽度），而非默认的 100%；
  ✅ 居中定位：配合 margin: auto（需配合 display: table 或块级+明确宽度才生效），即可水平居中整个导航容器；
  ✅ 优化边框体验：使用 #nav li:last-child a { border: none; } 移除最后一个链接的右侧边框，避免多余分隔线。

  以下是完整、可直接运行的代码示例：

  • About Us
  • Our Products
  • FAQs
  • Contact
  • Login

  #nav {
    width: auto;
    margin: 1.5em auto; /* 垂直间距 + 水平居中 */
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border: 1px solid #ccc; /* 统一边框，替代上下+右分隔 */
    display: table; /* 关键：使 ul 收缩包裹子项 */
  }
  
  #nav li {
    float: left; /* 保持水平排列（也可用 flex 替代，见下方说明） */
  }
  
  #nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
  }
  
  #nav li a:hover {
    color: #c00;
    background-color: #fff;
  }
  
  #nav li:last-child a {
    border-right: none; /* 清除末项多余边框 */
  }

  ? 注意事项与进阶建议：

  • 若项目支持现代浏览器，推荐用 display: flex 替代浮动，语义更清晰、维护性更高：

    #nav {
      display: flex;
      justify-content: center; /* 水平居中子项 */
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      margin: 1.5em auto;
    }
    #nav li { margin: 0; } /* flex 下无需 float */
    #nav li a { border-right: 1px solid #ccc; }
    #nav li:last-child a { border-right: none; }

  • 避免在 #nav 上设置 float 或 width: 100%，否则会破坏居中逻辑；
  • display: table 方案兼容性极佳（IE8+），适合需要广泛兼容的场景；
  • 如需响应式适配，可在媒体查询中调整 padding 或切换为垂直堆叠布局。

  通过以上方法，你就能获得一个真正「紧凑、居中、美观」的水平导航栏——它只占据实际内容所需空间，视觉聚焦明确，且易于扩展与定制。