css - 如何仅使用 css 实现等高菜单列表项

Question

我尝试使用 flex 并且这些项目仍然没有拉伸项目的最大高度。

ul.sub-menu-nav {
    padding:0px;
    height:100%;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch; 
    align-items: stretch;

    flex-direction: row;
    -webkit-flex-direction: row;
    margin:0px;
}
 li.sub-menu-top {
    height:100%;
}

JSFIDDLE 链接在这里

合理的表格行和表格单元格也没有显示相同的高度。

Answer 1

您是否试图使灰色的左边框具有相同的高度？这是我的解决方案：

ul.sub-menu-nav {
  display: flex;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

li.sub-menu-top {
  padding: 0px 20px;
  border-left: 1px gray solid;
}

ul.sub-sub-menu {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.sub-sub-menu li {
  padding: 4px 20px;
}

ul.sub-sub-menu li a {
  color: #000;
  text-decoration: none;
}

<ul class="sub-menu-nav">
  <li class="sub-menu-top">
    <h3><a href="#">Advertising</a></h3>
    <ul class="sub-sub-menu">
      <li><a href="#">Departments</a></li>
      <li><a href="#">Previous Commercials</a></li>
      <li><a href="#">Current Commercials</a></li>
      <li><a href="#">TechAnim</a></li>
    </ul>
  </li>
  <li class="sub-menu-top">
    <h3><a href="#">Training</a></h3>
    <ul class="sub-sub-menu">
      <li><a href="#">Academy</a></li>
      <li><a href="#">All Tutorials</a></li>
      <li><a href="#">Pipeline</a></li>
      <li><a href="#">Digital Tutors</a></li>
      <li><a href="#">Intranet</a></li>
      <li><a href="#">Training</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </li>
</ul>