Html 将菜单项扩展到全宽-Wordpress

我目前有一个网站，我希望菜单项扩展到整个菜单宽度。目前，情况是这样的：

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

我希望它更像这样：

[home | menu item 1 | menu item 2 | menu item 3 | contact------------------------]

[--home-- | ---menu item 1--- | ---menu item 2--- | ---menu item 3--- | -contact-]

我怎样才能做到这一点

韦斯比特：

导航栏的CSS：

.main-navigation {
display: block;
float: left;
clear: both;
width: 100%;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
}

.main-navigation ul {
display: none;
margin: 0;
padding-left: 0;
list-style: none;
}

.main-navigation li {
position: relative;
}

.main-navigation a {
display: block;
text-decoration: none;
}

---

将下一个CSS应用到您的网站：

.main-navigation ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
    }

    .main-navigation li {
      -webkit-box-flex: 1;
          -ms-flex: auto;
              flex: auto;
    }

---

这将解决您的问题。

您好，谢谢您的回复。我添加了这个CSS，但是没有任何改变。你知道为什么吗？检查缓存的样式表，确保它已应用于Chrome开发工具中，并且未被@media Query或其他一些样式覆盖。我在Chrome开发工具中对其进行了测试，手动更改了其中的样式。您可能需要检查覆盖，因为我将它们直接放入样式属性中。我进行了硬刷新，并在chrome dev中进行了检查。更改出现在CSS中，但菜单看起来仍然相同。所以菜单在您这边是全宽的？