本文介绍如何使用纯 css 实现一个宽度自适应、水平居中显示的水平导航栏，避免默认 100% 宽度拉伸，同时保持简洁结构与良好交互效果。
本文介绍如何使用纯 css 实现一个宽度自适应、水平居中显示的水平导航栏，避免默认 100% 宽度拉伸，同时保持简洁结构与良好交互效果。
要实现一个水平居中、不撑满整行、背景仅包裹菜单项的导航栏，关键在于打破 <ul> 默认块级元素的全宽行为，并利用 CSS 的布局机制（如 display: table）让容器“收缩包裹”其内容，再配合 margin: auto 实现居中。
原始代码中 #nav { width: 100%; float: left; } 强制导航栏占据整行宽度，且浮动导致父容器塌陷，难以居中。优化方案的核心改动如下：
✅ 移除固定宽度与浮动依赖：将 width: 100% 改为 width: auto，并添加 display: table —— 这使 <ul> 表现为一个“表格显示盒”，自动收缩至内部 <li> 的总宽度（即内容宽度），而非默认的 100%；
✅ 居中定位：配合 margin: auto（需配合 display: table 或块级+明确宽度才生效），即可水平居中整个导航容器；
✅ 优化边框体验：使用 #nav li:last-child a { border: none; } 移除最后一个链接的右侧边框，避免多余分隔线。
以下是完整、可直接运行的代码示例：
<ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul>
#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 或切换为垂直堆叠布局。
通过以上方法，你就能获得一个真正「紧凑、居中、美观」的水平导航栏——它只占据实际内容所需空间，视觉聚焦明确，且易于扩展与定制。
