html - 在 WordPress 的大型菜单中对齐不同高度的 元素

Question

我在 WordPress 中制作了一个大型菜单，这给我带来了麻烦。应该有四列，每列都有一个“标题”或顶部菜单项。这些标题底部有渐变边框。标题也有不同的长度。问题是其中一些跨越两条线，而另一些则没有。我一辈子都想不出如何获得想要的结果。

菜单由 WordPress 生成，因此 HTML 代码中的任何更改都必须进入函数或过滤器(？)

这是当前结果(准系统代码):

这是想要的结果:

nav {
  background: #4522FB;
  font-family: sans-serif;
}

.nav-mega-menu .menu-item-has-children a {
  font-size: 2.2rem;
  color: #fff;
}

.nav-mega-menu .menu-item-has-children>a:after {
  display: block;
  content: "";
  height: 0.5rem;
  width: 100%;
  background: linear-gradient(to right, #51E5FF, #0295FE);
}

.nav-mega-menu ul {
  max-width: 128.0rem;
  margin: 0 auto;
  overflow: hidden;
  padding: 5rem 0;
}

.nav-mega-menu .menu-item-has-children {
  display: block;
  width: 19%;
  float: left;
  padding: 0 2rem;
}

.nav-mega-menu .sub-menu a {
  font-size: 1.8rem;
  font-weight: 400;
  color: #51E5FF;
}

.mega-menu-bottom {
  clear: both;
  display: block;
}

<nav class="nav-mega-menu">
  <nav class="nav-mega-menu" role="navigation">
    <ul id="menu-mm-megamenu" class="menu">
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9"><a href="#">TOP MENU ITEM LONG</a>
        <ul class="sub-menu">
          <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
      <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-12"><a href="#">TOP ITEM</a>
        <ul class="sub-menu">
          <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
      <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16"><a href="#">TOP MENU ITEM LONG</a>
        <ul class="sub-menu">
          <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
      <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-21"><a href="#">TOP ITEM</a>
        <ul class="sub-menu">
          <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>

fiddle :https://jsfiddle.net/cja6oegd/3/

Answer 1

这是使用 jQuery 解决的:

var maxHeight = 0;
var orgHeight = 0;

$(".nav-mega-menu .menu-item-has-children > a").each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { 
      maxHeight = thisH;
   }
});

$(".nav-mega-menu .menu-item-has-children > a").each(function(){
   var orgHeight = $(this).height();
   if (orgHeight < maxHeight) {
      var paddingTop = maxHeight - orgHeight;
      $(this).css('padding-top', paddingTop);
   }
});

它循环遍历元素并获取最大元素的高度。然后它再次遍历它们并将所有高度较小的元素的 padding-top 设置为最大高度减去自高度度。

这会根据需要对齐元素。 fiddle :https://jsfiddle.net/cja6oegd/7/