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

发布于 2024-12-29 22:23:15 字数 673 浏览 2 评论 0原文

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

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

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

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

我也尝试过 margin-left:5% 但当屏幕宽度较低(例如 800)时,我的菜单项不适合 div 并且某些项目会下降。

i'm trying to make a menu, i want my menu looks like centered to left and right side of page in all resolutions. eg;

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

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

i've write a jquery function that calculates a new margin value for screen width and changes margin for every menu item. That works good. But i want to learn is it possible to do this only with css?

I also tried margin-left:5% but when screen has low width like 800, my menu items dont fit to div and some items go down.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

等风也等你 2025-01-05 22:23:15

嗯,百分比的问题在于,当与常量混合时,它们变得非常难以使用。您也可以通过为项目的字体大小/填充/行高定义 % 值来使项目适合 div。

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

well, the problem with the percentages is that they become very hard to work with when mixed with constants. You could probably make the items fit into the div by defining a % value for their font-sizes/paddings/line-heights as well.

On the other hand, if you only have 3 items in the menu, it would be easier to use float:left/right on item 1 and 3 and only change their margins based on the screen width. Ofcourse this probably wouldn't work on menus with more items.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文