javascript - bootstrap "mega-dropdown"居中主菜单导航项

Question

我正在尝试构建一个主菜单导航，其下方有一个全宽屏幕下拉菜单。我找到了一个很棒的例子来构建，但我似乎无法弄清楚主菜单项本身如何居中。

这是我到目前为止所拥有的，请参见此处的示例:http://codepen.io/ajmajma/pen/ALJbdk .

这非常有效，但是我需要将那些主菜单项(主页、关于等)居中。

我的第一个想法是 inline-block 它们，但是这会导致子菜单出现一些奇怪的行为。

如果我添加

.desktop-nav {
  text-align: center
}

.menu {
  display: inline-block
}

我得到了想要的居中效果，但是子菜单被限制在 ul 的小中心尺寸，我需要它保持页面的整个宽度。在此处查看行为 - http://codepen.io/ajmajma/pen/wzYPQm .

知道如何解决这个问题以获得预期的效果吗？谢谢!

Answer 1

您可以向 ul 添加一个 text-align:center 并向 li 添加一个 display:inline-block。只需从 li 中删除 float:left 即可。

.menu > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  text-align:center;
}

.menu > ul > li {
  display: inline-block;
  padding: 5px;
  margin: 0;
}

http://codepen.io/Founded1898/pen/amREJm