Html 缩放时菜单元素跳转

问题如下：我有一个基本的无序列表，我使用css将其转换为水平菜单。但是，在浏览器中放大或缩小时，菜单项会跳到下一行：

未缩放：

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

缩放：

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

---

我能做些什么来防止菜单项像那样跳跃

尝试使用ul的固定（最小）尺寸（或可能是包裹ul的div）进行试验，并为其设置溢出设置。比如：

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

---

我同意辛西特拉德的观点——在这方面留点余地。如果您使用的是百分比，我通常会尝试留出~2%的余量。如果您喜欢px作为您的选择单位，那么猜测的1-2%余量将涵盖大多数舍入误差

---

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

尝试在

li

元素中应用

position:relative

，

这是我看到的一个非常常见的问题。我认为这是因为你以像素为单位给出了宽度，所以当放大并四舍五入到下一个宽度时，总和将大于100%。您可以尝试使用%维度而不是像素。使用%似乎在很大程度上稳定了问题。谢谢SinistraD.float父项（ul）我还有一个jquery解决方案，如果你想将ulNice方法居中对齐，但是如果项目有边框，最后一个项目将失去右边框。