我正在创建一个水平菜单栏。
有一个包含内部 div 的外部 div（每个 div 都是单独的菜单项）。
我使用float: left 对这些内部 div 进行样式设置，以水平而不是垂直显示它们。
问题是菜单栏的左右空间不均匀，因此整个菜单栏看起来并不集中......即左侧的第一个菜单项与左边框和空间的空间较小右侧最后一个菜单项与右边框之间的距离更多。
我希望左右边距/内边距相等，以使菜单栏显示在中心。
我尝试在外部 div 上设置margin-left: auto; margin-right: auto，然后也在内部 div 上设置。两者似乎都没有帮助。
已经看过了：How to horizontally center a <div> in another <div>?
但是这个特定的答案是只将一个 div 居中，我所拥有的是一组需要集中的水平 div（菜单项）。
感谢任何帮助。
【问题讨论】：
标签： css
如果您的菜单项不复杂（例如没有固定大小或子元素），请尝试添加以下样式：
#outer {
text-align: center;
}
.menu-item {
display: inline; /* replace 'float:left' with this */
}
否则你需要一个固定宽度的内部元素的包装器：
#wrapper {
margin: 0 auto; /* center in outer DIV */
width: /* sum of widths of inner elements */;
}
注意：从语义上讲，最好使用列表来设置菜单项的样式，就像在 DEMO 中一样。
【讨论】：
margin: 0 Npx;。
首先，如果您的所有菜单项都指定了宽度和display:inline（这是默认值），您就不需要浮点数来排列它们。
但是假设你这样做了，当你设置一个浮点数时，你的元素会从文档的自然流中移除，因此margin:auto 将无法使其居中。在这种情况下，您可以做的是为菜单项创建另一个指定宽度的容器 div，您可以在其中使用 float 将它们排列起来。
现在剩下的就是将这个容器 div 居中在你的外部 div 中，你已经看到了如何解决这个问题。例如，您可以在 container div 上使用margin:auto 技术使其居中。确保外部 div 有 text-align:center。
【讨论】：