css 列表项与所有分辨率的边距相同

Question

我正在尝试制作一个菜单，我希望我的菜单在所有分辨率下看起来都居中于页面的左侧和右侧。例如；

  800 width
       ----------------------------------------
      | menu item1    menu item2    menu item3 |
      |                                        |
       ----------------------------------------

  1920 width
       ------------------------------------------------
      |   menu item1       menu item2      menu item3  |
      |                                                |
       ------------------------------------------------

我编写了一个 jquery 函数来计算屏幕宽度的新边距值并更改每个菜单项的边距。效果很好。但我想知道是否可以仅使用 css 来做到这一点？

我也试过 margin-left:5% 但是当屏幕宽度很低时，比如 800，我的菜单项不适合 div，有些元素会下降。

Answer 1

嗯，百分比的问题是当它们与常量混合时变得非常难以处理。您也可以通过为它们的字体大小/填充/行高定义一个 % 值来使这些元素适合 div。

另一方面，如果菜单中只有 3 个元素，则在元素 1 和 3 上使用 float:left/right 会更容易，并且只根据屏幕宽度更改它们的边距。当然，这可能不适用于包含更多元素的菜单。