android - 水平两行菜单在 Android 中不起作用

Question

我的水平菜单在我的电脑和 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%;}

Answer 1

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

根据你想采取的解决方案，你可以把它们都做成display:inline-block;通常宽度为 16.6%，然后使用媒体查询检测移动设备并将宽度更改为 33.3% 以强制将链接分成两行，每行 3。