html - 无法使用引导解决方案将不使用导航栏类的菜单居中

Question

注意：您可以在http://i.imgur.com/ubBbQB4.png看到格式正确的菜单文本与移动的菜单文本的图像

第二次编辑：注意从原始页面添加页面源代码。这个问题的 HTML 最初是针对 Header.php 文件的。第二次编辑 HTML 来自页面源代码，之前建议进行更改 - 最值得注意的是，“span3”和“logo”div 已从标题 HTML 中删除，因为它们阻止了菜单向左移动。我在之前没有回答的问题中发布了这段代码。

希望这可能有助于找出子菜单文本不会出现在框中的原因。谢谢。

<header style="opacity: 1; margin-top: 0px; ">
<div class="container">
    <div class="row">

    <div class="span3">
    <div id="logo">
            <a href="SITE URL">

                                    </a>
    </div>
    </div>

    <div class="span9">
        <!-- Mobile Menu -->
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>

        <!-- Standard Menu -->
        <div id="menu">
            <ul id="menu-nav" class="sf-js-enabled">
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-14"><a href="SITE URL">Home<mark class="bar"></mark></a></li>
<li id="menu-item-266" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a href="SITE URL?page_id=252">About<mark class="bar"></mark></a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="SITE URL?page_id=11">Blog<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"><a href="SITE URL?page_id=196">SITE NAME<mark class="bar"></mark></a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 20em; display: none; visibility: hidden; ">
<li id="menu-item-569" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-569" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-565" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-565" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-454" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="SITE URL?page_id=257">Contact<mark class="bar"></mark></a></li>

            </ul>
        </div>
    </div>

    </div>
</div>

编辑：

@davidpauljunior 感谢您的快速帮助。不幸的是，在逐步尝试了几次之后，它对我不起作用。我想我知道为什么它对我不起作用。我从主题的头文件中输入了标记，但是我从 TB CSS 而不是主题的 CSS 上传了 CSS，这很可能已经被自己调整了。如果你能原谅那个傻瓜，我将在下面再次破解它。我会在评论中这样做，但它不允许这么长的代码。注意标记为 EDIT 的部分。希望我没有浪费任何善意。谢谢。

–––––––––––––––––––––––––––––––</p>

我有一个基于 Twitter Bootstrap 的 WP 主题，主题的作者没有使用导航栏类作为菜单。相反，它只使用标题和#menu 以及导航的细微变化。我的问题是标准菜单由两部分组成：左侧的徽标和右侧的菜单，与右侧对齐。

我没有使用徽标，所以我希望菜单水平居中。我已经尝试了很多我在这里找到的用于居中的东西，但没有一个起作用。我认为这可能与主题使用“span3”作为徽标的事实有关。我去了 header.php 文件并对其进行了编辑。菜单现在一直移动到徽标位置应位于的左对齐位置。这就是进步，但我仍然没有找到将徽标置于顶部中心的方法。我已经尝试应用用于“导航栏”的许多代码位进行居中，但没有一个可以解决问题。

这是我删除徽标 div 后的标头 php 标记。

<!-- Header -->
<header>
    <div class="container" style="width: 100%;">
        <div class="row">



        <div class="span9"  style="width: 100%; text-align: center;">
            <!-- Mobile Menu -->
            <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>

            <!-- Standard Menu -->
            <div id="menu">
                <ul id="menu-nav">
                <?php 
                    if(has_nav_menu('primary_menu')) {
                    wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s', 'link_after' => '<mark class="bar"></mark>' ) ); 
                    }
                    else {
                    echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>  
                </ul>
            </div>
        </div>

        </div>
    </div>
</header>
<!-- End Header -->

<!-- Mobile Navigation Mobile Menu -->
<div id="navigation-mobile">
    <div class="container">
        <div class="row">
            <div class="span12">
                <ul id="menu-nav-mobile">
                <?php 
                    if(has_nav_menu('primary_menu')) {
                    wp_nav_menu( array('theme_location' => 'primary_menu', 'menu' => 'Primary Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
                    }
                    else {
                    echo '<li><a href="#">No menu assigned!</a></li>';
                    }
                ?>  
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- End Navigation Mobile Menu -->

菜单的其余部分在“span9”类下——我试图看看将其更改为“span12”是否有帮助，但它没有任何好处。我对此很陌生，但我正在努力理解。我应该在 header.php 和 CSS 样式文件中这样做吗？或者这一切都可以在头文件中的标记中完成，或者只是在 CSS 自定义中完成？

编辑：这是标题的 CSS 样式表部分 [编辑-来自主题本身]：

/* Navigation */

#menu {
    float: right;
}

/* Sub-Menu */

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    position: relative;
    float: left;
    margin: 0 15px;
    line-height: 160px;
    z-index: 40;
}

#menu ul li:last-child {
    margin-right: 0;
}

#menu ul a {
    position: relative;
    display: block;
    color: #B2B2B6;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#menu ul li:hover { visibility: inherit; }

#menu ul ul {
    position: absolute;
    top: -9999em;
    width: 220px !important;
}

#menu ul ul li {
    width: 100%;
}

#menu ul ul li .bar {
    display: none;
}

#menu ul li:hover ul,
#menu ul li.sfHover ul {
    top: 160px;
    left: -20px;
    z-index: 99;
}

#menu ul a:hover,
#menu ul li.sfHover a,
#menu > ul li.current-cat a,
#menu > ul li.current_page_item a,
#menu > ul li.current-menu-item a,
#menu ul li.current-page-ancestor a,
#menu ul li.current-menu-ancestor a {
    color: #56646F;
}

#menu ul li a .bar {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 6px;
    background: #F88A79;
    opacity: 0;
    -webkit-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    -moz-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    -o-transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
    transition: top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
}

编辑：这是我对菜单的自定义，以按照我想要的方式设置样式 - 一切都以这种方式运行并且看起来很好，只是它没有居中。（对不起，我不知道展示这一切的最佳方式——我希望我没有因为没有正确发布而违反一些礼仪）：

#menu {
width: 100%;
float: left;
margin: 0 auto;
}

#menu-nav {
text-align: center;
}

#menu menu-nav ul  {
    float:none;
    display:inline-block;
    text-align: center;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

#menu ul { 
display:inline-block; 
}

#menu ul { 
display:inline; 
zoom:1;
}

#menu ul li a .bar {
height: 50px;
}

#menu ul li.sfHover ul {
    top: 100px;
    left: -20px;
    z-index: 99;
}


#menu-nav{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
}



#menu ul a {
    position: relative;
    display: block;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#menu ul .sub-menu li a {
    color: #989898;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 5px 20px;

    -webkit-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    -moz-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    -o-transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
}

我希望有人可以对此有所了解。我已经尝试了几个星期来让它发挥作用。提前谢谢了。

score 0 · Accepted Answer

替换为span9并span12删除所有内联样式。

然后，它只是一些 CSS 调整。添加：

#menu {
  text-align: center;
}

然后将这里替换为：float: leftdisplay: inline-block

#menu ul li {
  position: relative;
  /* float: left; REMOVE */
  display: inline-block;
  margin: 0 15px;
  line-height: 160px;
  z-index: 40;
}

去掉这个样式，last-child它会稍微偏离中心。

#menu ul li:last-child {
  margin-right: 0;
}

工作演示在这里

注意：我只在我的演示中放置了第一个导航。

编辑 - 有关您更新的代码，请参阅以下演示。我已经粘贴了主题 CSS，然后是你的 CSS。我删除了一些东西，并添加了一些。您声明 90px 的宽度<ul>是奇数，并且您有一个无效的选择器#menu menu-nav- 缺少..

http://jsbin.com/IdIwUFO/6/edit

score 0 · Accepted Answer

按照这个问题发展、发展和发展的方式，我选择添加另一个答案。

这里的第一个问题是您的 HTML 不正确。有一个额外的<li>和<ul>在那里。我已经在底部的演示中将它们注释掉了。

其次，围绕样式存在很多混淆。选择器也有错误，例如#menu menu-nav ul（缺少 a .）。

我认为主题是无法触及的，目的是用您自己的主题自定义覆盖它。既然如此：

删除所有内联样式，这是不好的做法。
根据下面演示中的 CSS 更改您的样式。

http://jsbin.com/UVaZUki/1/edit

html - 无法使用引导解决方案将不使用导航栏类的菜单居中

2 回答 2

Related

Reference