html - Firefox 中的 Wordpress 均匀间隔菜单错误

Question

感谢这些论坛，我能够找到合适的代码来让我的 wordpress 菜单在屏幕上均匀显示。我遇到的问题是在 1400x900 的显示器上使用 firefox。在谷歌或 IE 中，它可以很好地适应不同的屏幕分辨率。在 Firefox 中，最后两个菜单项位于第二行。网址为:http://www.homeinsurance.svtwebdesign.com

Firefox 看起来像这样: http://www.homeinsurance.svtwebdesign.com/wp-content/uploads/2016/01/Firefox.png

我的代码如下:

ul#menu-mainmenu {
display:table;
width: 100%;
margin:0 0;}
ul#menu-mainmenu li {
 width: auto;              
 margin: 0 30px 0 20px;}

这是我唯一可以开始工作的代码。任何帮助将不胜感激。谢谢!

Answer 1

你的问题有错别字吗？我发现菜单溢出到 1199 像素屏幕宽度的第二行。我发现这种情况发生在 Chrome 和 Firefox 的相同宽度上。您可能需要检查您使用的浏览器版本。然后在 800px 处，菜单转换为移动菜单。这对我来说也发生在 Chrome 和 Firefox 上。我也在使用 http://quirktools.com/screenfly/对此进行测试。

您应该使用媒体查询在您的查看屏幕宽度发生变化时更改菜单中元素的宽度、填充和/或边距。这是一个例子:

ul#menu-mainmenu li{
        margin-left: 10px;
        margin-right: 20px;
    }

@media (min-width: 1200px) {
    ul#menu-mainmenu li{
        margin-left: 20px;
        margin-right: 30px;
    }
}

媒体查询中的 css 仅在屏幕宽度为 1200px 或更大时才生效。如果屏幕宽度小于 1200 像素，则只有独立的 css 才会生效。通过在独立的 css 中设置较低的边距，对于相同数量的链接，您可以获得更小宽度的菜单。

阅读更多关于媒体查询的信息:

• > https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• > https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
• > http://www.w3schools.com/cssref/css3_pr_mediaquery.asp