Question

我正在为我的婆婆创建一个带Wordpress的网站（这是为了少女设计）。基本上我已接近完成，但我在CSS中有两个问题。从我的观点来看，这些似乎是非常基本的问题，但是经过数小时和几小时的修补我想出了新的想法，谷歌这次没有帮助我。已经有一段时间了，因为我不得不创建或修改任何CSS。

第一个问题：

我无法将水平菜单置于中心位置。我尝试删除float:left，我尝试将其替换为float:none，我已将display: block和display:inline行更改为内嵌块，但菜单保留在它的位置。我唯一能做的就是将整个菜单移到页面顶部，这是不可取的。这可能是什么问题？

第二个问题：

菜单顶部和小菜单（移动设备）的底部和顶部似乎有填充（白线）。我已经跟踪了CSS中的所有填充行，但它们都没有真正有所作为，只有一个删除了水平填充并且不需要。

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

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

提前致谢！

致以最诚挚的问候，

Tero Korhonen 拉彭兰塔，芬兰

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

Hi Tero，

第一个问题有很快的解决方案 - 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您的徽标来解决的第二个问题（我看到它是200px）。所以在这种情况下应该是这样的：

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

修改

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

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

会覆盖 #main overflow: hidden的上一个正确规则。因此，您有两个选择：对800px以上的屏幕删除此规则，或将此属性从可见更改为隐藏。

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

Wordpress：CSS问题是将水平菜单和菜单

2 个答案: