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：检查最后一个元素的位置，如果它落下，你可以减少填充或字体大小，直到它们适合一行。

Answer 2

这是因为您的保证金权限为margin:0 10px 0 0;。css只有解决方案为media query

像

.style{
 margin-righ:10px;
}
@media screen and (max-width:480px){
 .style{
 margin-righ:4px;
 }
}

<强> learn more about media query here(w3.org)

更改屏幕分辨率时，LI元素会出现故障

2 个答案: