Wordpress：水平菜单居中的 CSS 问题和菜单周围的神秘填充

Question

我正在为我的岳母创建一个带有 Wordpress 的网站（这是为了少女设计）。基本上我已经接近完成，但我对 CSS 中的两个问题感到头疼。即使从我的角度来看，这些似乎都是非常基本的问题，但是经过数小时的修补，我的想法很新鲜，而这次谷歌并没有帮助我。自从我不得不创建或修改任何 CSS 以来已经有一段时间了。

第一个问题：

我无法让水平菜单居中。我试图删除float:left，我试图用float:none 替换它，我已经将display: block 和display:inline 行更改为内联块，但菜单保持在其位置。我设法做出的唯一区别是将整个菜单移到页面顶部，这是不希望的。这可能是什么问题？

第二个问题：

菜单顶部以及小菜单（移动设备）的底部和顶部似乎有填充（白线）。我已经追踪了 CSS 中的所有填充线，但它们都没有真正产生影响，只有一条删除了水平填充，这是不需要的。

如果有人发现我出错的地方，我会非常高兴！

网址是http://janenlahwr.cluster020.hosting.ovh.net/

提前致谢！

最好的问候，

特罗·科霍宁 芬兰拉彭兰塔

Answer 1

对于菜单问题，像这样改变你的 CSS 规则：

.main-navigation ul {
    margin: 0px 0 0 0;
    padding: 0px 0;
    padding-left: 0px;
    list-style-type: none;
    /* remove float: left; */
    text-align: center; /* added */
    width: 100%; /* added */
}
.main-navigation ul li {
    position: relative;
    display: inline-block;
    /* remove float: left; */
    text-align: center; /* not necessary */
}

Answer 2

嗨，泰罗，

第一个问题有一个非常快速的解决方案 - CSS3 Flexbox。你可以阅读它on this w3schools site。 删除不必要的float: left 并将display: flex 和justify-content: center 添加到.main-navigation ul。所以它应该是这样的：

.main-navigation ul {
    margin: 0px 0 0 0;
    padding: 0px 0;
    padding-left: 0px;
    list-style-type: none;
    display: flex;
    justify-content: center;
}

您可以通过设置div.site-logo max-height = height 您的徽标来解决第二个问题（我看到这是 200 像素）。所以在这种情况下应该是这样的：

.site-logo {
    min-height: 70px;
    padding: 0px;
    float: left;
    line-height: normal;
    max-height: 200px;
}

编辑：

抱歉，我忘了检查较低的分辨率。 overflow 有问题。您在 style.css:640 overflow: hidden 中设置，它可以正常工作，因为分辨率高于 800 像素。如果没有，则激活此规则：

@media only screen and (max-width: 800px) {
    #main {
        overflow: visible;
    }
}

覆盖 #main overflow: hidden 之前的正确规则。因此，您有两个选择：删除超过 800 像素屏幕的此规则或将此属性从可见更改为隐藏。

我希望我能帮助你解决你的问题 :) 祝你好运！