Question

我试图将我的子菜单放在我的bootstrap 3导航栏中。

这是我想要的结果： A picture of what the menu is suppose to look like.

然而，我的子菜单浮动到左边。

HTML：

<li id="menu-item-243" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-243 dropdown submenu"><a href="#">Pages<span></span></a>
<ul class="dropdown-menu">
    <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://thenordik.com/demo/themeforest/wordpress/specialists/about-team/">About Team</a></li>
    <li id="menu-item-244" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-244"><a href="http://thenordik.com/demo/themeforest/wordpress/specialists/404">404</a></li>
</ul>

CSS：

.nav-inline .nav .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
  box-shadow: none;
  border: none;
  margin: 0 auto;
  max-width: 100%;
  background-color: #d5c298;
    color:#fff;
  padding: 0;
}
.nav-inline .nav .dropdown-menu li {
  float: left;
}
@media (max-width: 767px) {
  .nav-inline .nav .dropdown-menu li {
    float: none;
  }
}
.nav-inline .nav .dropdown-menu li a {
  width: auto !important;
  background: transparent;
  line-height: 49px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  color: #fff;
}
.nav-inline .nav .dropdown-menu li a:hover {
  color: #000;
}

codepen是https://codepen.io/anon/pen/vdNZWL

Answer 1

只需添加：

    .navbar-links-custom .dropdown ul {
         text-align:center;
     }

     .navbar-links-custom .dropdown ul li {
         float: none;
         display:inline-block;
     }

如果这些内容无效，请尝试在值之后添加！important。

如何使内联子菜单居中

1 个答案: