CSS Flexbox:如何为所有 <li> 项目设置相同的高度,而与不同的字体大小无关?

CSS Flexbox: How to set same Height to all <li> Items independent of different Font Sizes?

假设我们在移动网站布局上有一个经典下拉导航。所有菜单项都显示在彼此下方:

ul.level_1,
ul.level_2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

ul.level_1 a {
    font-size: 1.5em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
}

ul.level_2 a {
    font-size: 1em;
    padding-bottom: 0.75em;
    padding-top: 0.75em;
}
 <div class="nav">
     <ul class="level_1">
         <li> bla </li>
         <li> bla </li>
         <li>
             <ul class="level_2">
                 <li> bla </li>
                 <li> bla </li>
            </ul>
        </li>
    </ul>
</div>


使用相同的字体大小这很容易,但是:

挑战:

因此我希望所有 <li> 项具有相同的高度,这样按钮稍后将具有相同的高度。

当我简单地在超链接中添加一个padding时,框的高度会增加,取决于相应的字体大小。

是否有选项可用于指定 <li> 项的高度 独立于 其包含文本的字体大小?

em单位与字体大小成正比。因此,简单的答案是使用像 px.

这样的绝对单位

有什么理由不能像这样以像素为单位设置锚点的高度吗?

ul.level_1,
ul.level_2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

ul.level_1 a {
    font-size: 1.5em;
    min-height: 30px;
    display: inline-block;
}

ul.level_2 a {
    font-size: 1em;
    min-height: 30px;
    display: inline-block;
}
 <div class="nav">
     <ul class="level_1">
         <li> <a>bla</a> </li>
         <li> <a>bla</a> </li>
         <li>
             <ul class="level_2">
                 <li> <a>bla</a> </li>
                 <li> <a>bla</a> </li>
            </ul>
        </li>
    </ul>
</div>