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

我正在尝试制作一个菜单，我希望我的菜单看起来像集中到所有分辨率页面的左侧和右侧。例如;css列表项目与所有分辨率相同的边距

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

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

我写了一个jquery函数，为屏幕宽度计算新的边距值并更改每个菜单项的边距。这很好。但我想学习是否有可能只用CSS来做到这一点？

我也试过margin-left：5％，但是当屏幕宽度像800一样低时，我的菜单项不适合div和一些项目下降。

来源

2012-01-30 Malixxl

好吧，百分比的问题在于，当与常量混合时，它们变得非常难以处理。你也许可以通过为它们的font-sizes/paddings/line-height定义一个％值来使这些项目适合div。另一方面，如果菜单中只有3个项目，则在项目1和项目3上使用float：left/right将更容易，并且仅根据屏幕宽度更改其边距。当然这可能不适用于具有更多项目的菜单。

来源

2012-01-30 22:40:12 Ege

所以javascript函数更好更容易？ – Malixxl 2012-01-30 22:47:27

这真的取决于你的设计，如果你确定＃1和＃3进入div的远端（因此在＃2的每一边创造一个大的余量），你甚至不需要JS。只是漂浮他们会做伎俩。但我不会。此外，你真的不需要通过JS来操纵边距。只给一个关于屏幕宽度的body元素的类，并根据该选择器定义css，如：“body.narrow .item”或“body.wide .item” – Ege 2012-01-30 22:55:17

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

回答

相关问题