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

Question

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

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>

使用相同的字体大小这很容易，但是：

挑战：

主菜单 ul.level_1 的菜单项有 font-size 1.5rem
子菜单 ul.level_2 的菜单项有 font-size 1.2rem

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

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

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

Answer 1

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>

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

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

html

css

drop-down-menu

flexbox

mobile-website