Html 如何使此菜单居中并带有边框，同时在浏览器调整大小时仍能正常工作？

所以我把这个水平菜单栏放在一个页面的中心，完全用CSS设计，无论何时放大或缩小，边框要么比包含的元素宽，要么迫使最后一个元素向下移动到下一行。如何更改此选项，使其在浏览器缩放时正常工作

相关的html文件可以在中找到，css是。

为您的容器或外部容器指定宽度，并使用宽度的百分比值，而不是固定宽度

body {
background-color:black;
width:1015px;
}
#nav {
border:2px solid #FF0000;
display:block;
height:37px;
margin:0 auto;
padding:0;
width:100%;
}

---

存在快速折衷解决方案：从a中删除px中的硬宽度，并将流体宽度百分比添加到li:

---

编辑：新的、甜蜜的、酷的版本：

不错！这完全解决了放大时的问题，但是在缩小时仍然存在一些瑕疵。你可以在JSFIDLE上看到，如果你缩小，nav的红色边框超过了元素的组合宽度，大量黑色背景照进来。我认为纯css中没有解决方案，因为当你缩小时，像素宽度变成了一个浮点，而不是整数。还有另一个解决方案-从ul中删除红色边框，并将此边框添加到li：当您这样做时，这两个问题仍然会发生。