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列表項目與所有分辨率相同的邊距

回答

相關問題