具有可变间距的基于 UL 的液体水平菜单答案

【问题标题】：Liquid horizontal UL-based menu with variable spacing具有可变间距的基于 UL 的液体水平菜单
【发布时间】：2012-05-04 20:04:07
【问题描述】：

前注：这不是重复的。我检查了几个问题，但我的问题在细节上有所不同。

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

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

我怎样才能做到这一点？

【问题讨论】：

标签： html css layout spacing alignment

【解决方案1】：

我认为您正在寻找超级神圣的 Uber-Grail。我可能错了，但我认为单独使用 CSS 是不可能的。这是因为没有像 max-width 这样的 max-margin 。而如果你使用 JS（比如 jQuery）你会有一种定位的跳跃，因为 JS 必须等到页面加载并准备好之后才开始计算宽度值。

如果你愿意做一些不同的事情。我建议您定义与窗口大小相结合的整个导航的最大宽度，然后为现代浏览器使用 CSS flex。如果您使用 modernizr.com，您可以在 IE8 的 CSS 中进行分支，并改用 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

【讨论】：

赞成display:table, table-row, table-cell- 我个人看不到任何可行的替代方法来使用这些 CSS 属性（除了使用表格本身）
刚刚使用 display: table、table-row 和 table-cell 以及 text-align、vertical-align 和各种填充来获得我们想要的灵活性和布局。如果您面临这个挑战，我当然支持这种方法的实施:)，一旦我决定尝试它就轻而易举了。但是，我不确定此方法是否可用于比标题更复杂的布局（通常由按钮/输入中包含的单行文本组成）。
max-width 结合 width: 100% 在这里也可以非常有效地使用。