1

我的水平菜单在我的电脑和 iPhone 上运行良好，但在我的 Android 手机上运行不佳。

当浏览器尺寸较小时，菜单必须有两行。在我的 Android 手机上，它只显示 1 行，两条线相互重叠。但是当我在手机上刷新页面时，菜单以正确的方式出现！

有谁知道出了什么问题？

这是网站http://nederlandoverzicht.nl/cs

这是我的菜单 CSS 代码

#menu ul{list-style-type:none;
width: 90%;
margin: 0px auto;
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
text-align:center;
}

#menu ul li{
display: block;
width:33.3333333334%;
color:#fff;
padding-top:10px;
font-size:12px;
float:left;
font-family:"Tahoma";}

#menu{background-color:#bd4545;
border-radius: 5px;
height:58px;
width:100%;}
4

1 回答 1

0

查看您当前的代码，您的所有<li>标签都显示为表格单元格。无论您将它们设置为多宽，<ul>withdisplay:table;都会尝试将它们全部放入一行中，因为它们没有被分隔到设置为显示为表格行的容器中。

根据您要采用的解决方案，您可以display:inline-block;正常将它们全部设置为 16.6% 的宽度，然后使用媒体查询来检测移动设备并将宽度更改为 33.3% 以强制链接为两行 3。

于 2012-10-16T16:45:31.117 回答