Question

在许多WordPress模板中，菜单未扩展到其所在元素的整个宽度。可扩展的尝试使菜单适合它所在的div的宽度。

我的header.php

<div class="navigation-menu">
  <div id="navbar" class="header-bottom navbar default">
                        <nav id="site-navigation" class="navigation main-navigation" role="navigation">                                 
                            <h3 class="menu-toggle"><?php _e( 'Menu', 'templatemela' ); ?></h3>
                            <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'templatemela' ); ?>"><?php _e( 'Skip to content', 'templatemela' ); ?></a> 
                            <div class="mega-menu">
                                <?php wp_nav_menu( array( 'theme_location' => 'primary','menu_class' => 'mega' ) ); ?>

                            </div>  

                        </nav><!-- #site-navigation -->
    </div>

Answer 1

为了更好地发布您的问题，您需要wp_nav_menu生成的html。您可以通过在Chrome中打开您的页面来获取它，右键单击您的菜单并选择“检查元素”。然后，您将能够复制您希望样式的html。没有它，我们会猜测。

这是一个猜测：

.mega-menu ul { display:table; width:100%; table-layout: fixed; }
.mega-menu ul > li { display:table-cell; width:100%; }

这会将您的UL菜单转换为像表格一样显示。并希望使项目的宽度相等，如此主题所示：CSS table-cell equal width。

Wordpress中的水平刻度菜单

1 个答案: