Wordpress 菜单类上的 CSS 格式答案

【问题标题】：CSS Formatting on Wordpress Menu ClassWordpress 菜单类上的 CSS 格式
【发布时间】：2015-06-09 04:59:37
【问题描述】：

我的水平 WordPress 菜单上有以下格式。效果很好。

.menu {
  width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 50;
  list-style: none;
}

在我的主题的页脚中，我尝试通过 WordPress 菜单设置使用垂直菜单。当我通过一个小部件将菜单放在页脚中时，我得到了这个：

<div class="menu-footer-container"><ul id="menu-footer" class="menu">

因为 UL 类是菜单，所以它会拾取上面的水平 css 并使我的页脚中的菜单水平。如何添加 CSS 以使 WordPress 页脚中的菜单垂直？

【问题讨论】：

【解决方案1】：

<ul id="menu-footer" class="menu-ver">

您可以使用不同的类，例如 menu-ver 具有以下 CSS，

.menu-ver {
  width: 200px;
  margin: 0 auto;
  position: relative;
  z-index: 50;
  list-style: none;
}
.menu-ver li{
  width: 100%;
}

如果您不希望它居中，您也可以根据您的设计调整边距属性。

【讨论】：

【解决方案2】：

.menu-footer-container .menu li {
    display: inline;
}

使用此代码，它会很好地工作。谢谢

【讨论】：

【解决方案3】：

我不认为问题出在 .menu 类上，我假设问题出在样式表某处的 li 标签的 CSS 样式中。

它应该看起来像这样：.menu li {display:inline-block;}。您可以通过只为您的页脚的 li 标记提供样式来解决此问题，如下所示：

#menu-footer li {
    display: list-item;
}

无论如何，如果您仍然想为页脚设置 .menu 类的样式，您可以这样做：

.menu-footer-container .menu { ... } 或简单地将#menu-footer { ... } 设置为具有所需结果的样式。

【讨论】：