Html 具有可变间距的液体水平UL菜单

普雷诺特：这不是复制品。我检查了几个问题，我的问题在细节上有所不同

我目前在网页上有这样的水平导航菜单：

菜单是ul元素。问题是，目前我必须明确指定边距，以获得李的间距。我希望间距尽可能为60px，但只要浏览器缩小，就缩小，不再允许如此大的菜单间距

---

我怎样才能做到这一点呢？

我想你在寻找超级圣杯。我可能错了，但我认为单凭CSS是不可能的。这是因为没有什么比“最大边距”更像“最大宽度”。如果您使用JS（例如jQuery），您将有一种定位的跳跃，因为JS必须等待页面加载并准备就绪，然后开始计算宽度值

如果你愿意做一些不同的事情。我建议您定义整个导航的最大宽度，该宽度与窗口大小相结合，然后在现代浏览器中使用CSS flex。如果您使用modernizr.com，您可以在IE8的CSS中分支并使用display:table、table row、table cell。对于IE7，您只需使用float

为什么不在现代浏览器中使用display:table？我可能看起来一样，但元素之间的边际收益在flex和table中有所不同。在flex中，元素之间的间距是完全相同的（意味着像素级），而在表格中它们相对相同（意味着较宽的表格单元格比较窄的单元格获得更多的空间）

---

向上投票支持显示：表格、表格行、表格单元格——就我个人而言，除了使用这些CSS属性（除了使用表格本身）之外，我看不到任何可行的替代方法，只是将显示：表格、表格行和表格单元格与文本对齐、垂直对齐和各种填充结合使用，以获得我们想要的灵活性和布局。如果您面临这样的挑战，我当然会支持这种实现方法：），一旦我决定尝试它，它就轻而易举了。但是，我不确定这种方法是否可以用于比标题（通常由按钮/输入中包含的单行文本组成）更复杂的布局。最大宽度与宽度组合：100%在这里也可以非常有效地使用。

table
+--------------------------------+---------+
|      wide content in here      |  short  |
+--------------------------------+---------+
   6px                       6px  2px    2px


flex
+----------------------------+-------------+
|    wide content in here    |    short    |
+----------------------------+-------------+
  4px                     4px 4px       4px