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

Question

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

以来已经有一段时间了

第一个问题：

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

第二题：

菜单顶部以及小菜单（移动）的底部和顶部似乎有填充（白线）。我已经找到 CSS 中的所有填充线，但其中 none 确实有所不同，只有一个删除了水平填充，这是不需要的。

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

网站位于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 并在 .main-navigation ul 中添加 display: flex 和 justify-content: center。所以它应该是这样的：

.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;
}

编辑：

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

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

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

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

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

Wordpress: CSS issues with centering a horizontal menu and mysterious paddings around menu

css

wordpress

menu

padding