本文介绍如何使用纯 css 实现一个水平居中、宽度自适应（不撑满整个页面）、带边框和悬停效果的导航栏，无需额外容器包裹，兼顾语义性与响应式友好性。
本文介绍如何使用纯 css 实现一个水平居中、宽度自适应（不撑满整个页面）、带边框和悬停效果的导航栏，无需额外容器包裹，兼顾语义性与响应式友好性。
要实现一个水平居中、不拉伸至全屏宽度的导航栏，关键在于打破默认块级元素的“100% 宽度”行为，并让导航容器自然包裹其内容。原始代码中 #nav { width: 100% } 和 float: left 导致导航栏强制铺满父容器，而通过 display: table 配合 margin: auto，可让
- 表现为一个“自动收缩宽度 + 水平居中”的内联块级容器——这是简洁、语义清晰且无需额外 HTML 包裹的推荐方案。
以下是优化后的完整代码：
#nav {
width: auto; /* 关键：取消固定宽度，让 ul 自适应内容 */
margin: 0 auto; /* 水平居中（需配合 display: table 或 inline-block） */
padding: 0;
list-style: none;
background-color: #f2f2f2;
border: 1px solid #ccc; /* 合并上下边框为统一边框，更简洁 */
display: table; /* 核心技巧：使 ul 收缩宽度并支持 margin: auto 居中 */
}
#nav li {
float: left; /* 保持水平排列 */
}
#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: table 是此方案的核心——它让
- 行为类似表格，自动收缩宽度并响应 margin: auto；若需兼容极老浏览器（如 IE7），可改用 text-align: center + display: inline-block 的父容器方案（但需额外
- 避免对
- 设置固定百分比宽度（如 width: 25%），否则在不同屏幕或项数变化时易失衡；本方案天然适配任意数量菜单项。
- 如需响应式支持（例如小屏堆叠），可在媒体查询中添加 #nav { display: block; text-align: center; } 和 #nav li { float: none; display: inline; }。
- 推荐为
- 添加 role="navigation" 提升可访问性：
包裹）。该方案简洁、健壮、语义正确，是构建轻量级居中导航栏的现代实践方式。
