将菜单项扩展到全宽 - Wordpress

Question

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

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

我希望它更像这样：

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

我怎样才能做到这一点？

网站：http://dietindustries.com/

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

Answer 1

将下一个 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;
    }

这将解决您的问题。

将菜单项扩展到全宽 - Wordpress

Extend menu items to full width - Wordpress

html

css

wordpress

menuitem

nav