1

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

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

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

我怎样才能做到这一点？

4

1 回答 1

2

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

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

为什么不在现代浏览器中使用 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
于 2012-05-04T12:04:07.597 回答