【问题标题】: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 页脚中的菜单垂直?

【问题讨论】:

  • 这样的结果可以帮助我们为您找到解决方案。
  • @user1609391 如果我的回答对您有帮助,请考虑将我的回答标记为正确:)

标签: css wordpress menu


【解决方案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;
      }
      

      看看这个online example on jsFiddle


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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-02-12
        • 2011-04-02
        相关资源
        最近更新 更多