缩放时跳转的菜单元素

问题如下：我有一个基本的无序列表，我用css变成了一个水平菜单。但是同时或出浏览器缩放，菜单项跳转到下一行这样：缩放时跳转的菜单元素

未缩放：

|菜单1 | |菜单2 | |菜单3 | |菜单4 |

放大：

|菜单1 | |菜单2 | |菜单3 |
|菜单4 |

我该怎么做才能避免菜单项目跳跃？

2012-04-20 Tomkarho

那是一个非常常见的问题，我已经看到了。我认为这是因为你以像素为单位给出了宽度，所以当缩放并舍入到下一个宽度时，总和将变得大于100％。你可以尝试使用％尺寸而不是像素。 – SinistraD 2012-04-20 17:47:26

使用％似乎已经稳定了大部分问题。谢谢你SinistraD。 – Tomkarho 2012-04-20 18:50:23

浮动父母（ul）我也有一个jQuery的解决方案，如果你想对齐中心的ul – 2013-06-17 18:47:30

尝试试验ul的固定（最小）尺寸（或可能包含ul的div）并给它一个溢出设置。例如：

ul { 
    width: 750px; 
    overflow:auto; 
}

2012-04-20 17:46:11 Armatus

尼斯方法，但如果项目有一个边框，最后一个项目将失去其右边框。 – SinistraD 2012-04-20 17:53:58

@SinistraD：怎么这样？ – 2012-04-20 17:57:32

我同意SinsitraD - 在那里留下一点余地。如果您使用百分比，我通常会尝试留下〜2％的津贴。如果你更喜欢px作为你选择的单位，那么一个1-2％的猜测津贴将覆盖大部分舍入误差。

您可能会发现浏览器之间的缩放行为不一致 - 这是因为大多数浏览器在缩放时使用不同的方法计算大小。

2012-04-20 17:51:58

尝试应用position: relative在li元素

2012-04-20 17:52:55

回答