元素的高度显示异常的问题

Question

这是DOM结构

这是样式

目前情况是li的高度有100;

而a标签高度只有29;这个li也没有其他的样式

请问这是什么原因造成的 又该如何解决呢

Answer 1

在li上也设置font-size即可

li {
    font-size: 0.22rem;
}

或者给a增加

a {
    display: block;
}

大概原因好像是：

li 是块元素，font-size 和 line-height都继承了父级，导致li的高度 = font-size ✖️ line-height ✖️ 行数；而a元素作为行内元素，它重新设置了font-size，a的高度 = font-size ✖️ line-height ✖️ 行数。
此时li的真实高度为 Math.max(li的高度, a的高度)

Answer 2

flex items 在 cross 方向默认 stretch 拉伸，调整 align-items 即可

Answer 3

其实你这个li是有东西的，因为父级元素是display: flex，所以，ul下面的所有子元素（li）是有东西的。

而这个东西应该就是flex: 0 0 auto，以及其他默认的 flex 的属性。