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

Question

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

第一个问题:

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

第二个问题:

菜单顶部以及小菜单(移动)的底部和顶部似乎有填充(白线)。我已经追踪了 CSS 中的所有填充线，但它们都没有真正发挥作用，只有一个删除了水平填充，这是不需要的。

如果有人发现我哪里做错了，我会很高兴!

网站位于 http://janenlahwr.cluster020.hosting.ovh.net/

提前致谢!

最好的问候，

泰罗科霍宁 芬兰拉彭兰塔

Answer 1

你好泰罗，

第一个问题有非常快速的解决方案 - 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 your logo 来解决(我看到是 200px)。所以在这种情况下应该是这样的:

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

编辑:

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

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

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

希望我能帮助您解决问题 :) 祝您好运!