基于UL的液体水平菜单，可变间距

Question

PreNote：这不是重复的。我已经检查了几个问题，我的细节也不同。

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

菜单是ul元素。问题是，目前我必须明确指定margin-right以获得li之间的间距。我希望尽可能将间距设置为60px，但是当浏览器缩小并且不再允许如此大的菜单间距时缩小。

我怎样才能做到这一点？

Answer 1

我认为你正在寻找超级神圣的Uber-Grail。我可能错了，但我不认为单独使用CSS是可能的。这是因为没有像最大边距那样的最大边距。如果你使用JS（例如jQuery），你将有一种跳跃的定位，因为JS必须等到页面加载并准备就绪，然后开始计算宽度值。

如果你愿意这样做有点不同。我建议你定义整个导航的最大宽度，它与窗口大小相结合，然后使用CSS flex为现代浏览器。如果你使用modernizr.com，你可以在CSS中为IE8分支并使用display：table，table-row，table-cell。对于IE7，你只需使用float。

为什么不在现代浏览器中使用display：table？我看起来可能相同，但元素之间的边距增益在flex和table中有所不同。虽然在flex中，元素之间的间隙绝对相同（意思是像素），但它们在表格中相对相同（意味着更宽的表格单元比狭窄的单元格获得更多的空间）

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


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