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

Answer 2

我找到了解决方法：

.desktop-nav {
  margin-left: 50%;
}

.menu > ul > li > ul {
  margin-left: -50%;
}

如果您不想在桌面设置margin，则必须创建.iWantThisMenuToCenter {margin-left: 50%}之类的内容，并将其分配给<nav>代码。

引导“mega-dropdown”居中主菜单导航项目

2 个答案: