如何在顶部内联显示自定义 Wordpress 菜单？答案

【问题标题】：How to show Custom Wordpress Menu inline at top?如何在顶部内联显示自定义 Wordpress 菜单？
【发布时间】：2018-05-31 22:06:10
【问题描述】：

我刚刚集成了自定义 wordpress 菜单，菜单显示在顶部，我想在其中显示，但我对内联对齐有问题。我以这种方式将菜单从主题插入到 header.php 文件中：

<?wp_nav_menu( array( 'theme_location' => 'top-menu', 'container_class' => 'top_menu_class' ) ); ?>

菜单名为top-menu，它显示在顶部，但在水平线上。我想像主菜单一样垂直。因为菜单有类选择器，所以我尝试将 CSS 规则分配给 CSS 类，但似乎没有改变它：

.top_menu_class {
display: inline-block;
}

但似乎没有做出任何改变。任何帮助here？谢谢！

【问题讨论】：

标签： css wordpress

【解决方案1】：

添加这个 CSS

.top_menu_class,ul#menu-coping-nutrition{
float:left;
width:100%;
}

ul#menu-coping-nutrition li {
    float: left;
    width: auto;
    padding: 15px;
}

【讨论】：

你能告诉我如何将链接的颜色更改为顶部菜单吗？我试图在课堂上添加：color:#fff;，但似乎没有做出改变。
你需要定位锚
例如？什么锚？
ul#menu-coping-nutrition li a { color : #fff; }

【解决方案2】：

看起来您需要将父容器设置为 100%，目前限制为 60px 宽度，之后您可以轻松地将列表项设置为 inline-block 并且它会在水平线上很好地对齐。

.top_menu_class {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.menu-item {
    display: inline-block;
}

【讨论】：