【问题标题】:How to center an inline sub-menu如何使内联子菜单居中
【发布时间】:2018-02-02 00:07:56
【问题描述】:


我正在尝试将我的引导程序 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;
}

密码笔是https://codepen.io/anon/pen/vdNZWL

【问题讨论】:

  • “但是,我的子菜单向左浮动” - 这就是 float 所做的......不要使用浮动,而是使用 inline-block 或 flexbox那么。
  • @CBroe 我用过 inline-block 但它不起作用。
  • 那么您很可能没有费心去做最基本的研究来找出 如何 将内联块元素居中...
  • @CBroe 你为什么这么被动好斗?你还好吗?我只是一个初学者,只是想找到解决问题的方法。
  • 以所有可能的方式使用 CSS 将内容居中,几乎所有可以想象的星座都是一个已经在整个互联网上被多次讨论到死的话题。我很难相信任何人都可能在这件事上找不到任何有用的东西,如果他们真的付出了认真的努力。

标签: html css twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

只需添加:

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

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

如果其中一些不起作用,请尝试在值之后添加 !important。

【讨论】:

    猜你喜欢
    • 2013-08-30
    • 2013-08-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-11
    • 2012-04-11
    • 2021-09-21
    • 2017-04-22
    相关资源
    最近更新 更多