html - 更改屏幕分辨率时 LI 元素乱序

Question

我有一个菜单，其中我使用样式化的 UL 给出了几个链接。当分辨率设置为 100% 时，它看起来很棒，但是当我更改屏幕分辨率时，链接不适合菜单，其中一些链接会转到另一行，这会导致恼人的错误。

我的问题是；这怎么可能？我的意思是，如果当分辨率设置为 100% 时所有元素都放在一起，当我更改分辨率时所有元素都应相应缩放，这意味着菜单结构不应更改。使此菜单静态化并防止 LI 重新排序的最佳方法是什么？

我的代码:

<ul class="top-menu drop" style="margin:4px 10px 0 0;">
//get items from DB to var $Result
while($a_row=mysql_fetch_array($Result))
{
 $menu_id++;
 echo "<li><a href=''>$a_row[main_product_name]</a>";
 echo "<ul class='drop-down' id='menu$menu_id'>";
 //populate the menu UL
 echo "</ul></li>";
}

菜单的CSS:

.top-menu{
padding:0;
margin:0 10px 0 0;
height:20px;
list-style: none;
}

Answer 1

这里有两种方式:

1) 纯 css 解决方案使列表元素的宽度带有百分比(使它们流畅)。但是您可能想要不同的宽度，并且让每个宽度都不同会很麻烦，因此您可以使用第二个选项。

2) Javascript:检查最后一个元素的位置，如果它掉下来，你可以减少填充或字体大小，直到它们适合一行。