0

我有一个菜单，在其中我使用样式化的 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;
}
4

2 回答 2

0

这里有2种方法：

1）纯css解决方案使列表元素的宽度具有百分比（使它们流动）。但是您可能希望有不同的宽度，并且使每个宽度都具有不同的宽度将是很多工作，因此您可以使用第二个选项。

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

于 2013-08-29T16:45:55.987 回答
0

这是因为你的保证金是正确的margin:0 10px 0 0;.css 唯一的解决方案是media query

喜欢

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

在此处了解有关媒体查询的更多信息（w3.org）

于 2013-08-29T16:52:03.277 回答